vue前端怎么解决跨域问题呢

Question

老师你好，前端怎么解决跨域问题呢，我记得好像vue有专门解决跨域的方法的，望解答

Answer 1

扬_灵 2020-06-11 17:37:11

同学你好，

解决跨域问题常用的解决方案有两个：

JSONP：利用script标签可跨域的特点，在跨域脚本中可以直接回调当前脚本的函数。

CORS：服务器设置HTTP响应头中Access-Control-Allow-Origin值，解除跨域限制。

但是这两个跨域方案都存在一个致命的缺陷，严重依赖后端的协助。 详细地址你可以参考https://segmentfault.com/a/1190000011145364

在vue中可以使用http-proxy-middleware 代理解决

1、打开config/index.js,在proxyTable中添写如下代码：

proxyTable: { 
  '/api': {  //使用"/api"来代替"http://f.apiplus.c" 
    target: 'http://f.apiplus.cn', //源地址 
    changeOrigin: true, //改变源 
    pathRewrite: { 
      '^/api': 'http://f.apiplus.cn' //路径重写 
      } 
  } 
}

2.使用axios请求数据时直接使用“/api”：

getData () { 
 axios.get('/api/bj11x5.json', function (res) { 
   console.log(res) 
 })

如果不能解决你的问题，可以继续追问。

• 提问者 weixin_慕设计1495142 #1

  在老师这份课件里我应该怎么改呢

• 扬_灵 回复 提问者 weixin_慕设计1495142 #2

  同学你好，我们的课程里面跨域是在后台项目使用cors插件解决的，前端不用做处理，如果你想跨域访问接口可以按照上面的代码配置proxyTable。如果你感兴趣可以把后台的项目下载到本地查看效果，如果不能解决你的问题，可以继续追问。