美文网首页
处理接口跨域问题(vue)

处理接口跨域问题(vue)

作者: YellowPoint | 来源:发表于2018-09-21 14:40 被阅读0次

前后端分离WEB项目本地开发的跨域问题

vue-cli里有代理设置。
但是!!!怕麻烦的话,啥都别说了。不如试试这个,一劳永逸。
可能是东半球解决跨域问题最简单粗暴的方法:
1.chrome复制快捷方式。
2.右键快捷方式,属性----目标
改为以下(确保这些安装路径都是存在的)

"C:\Users\Administrator\AppData\Local\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=C:\Users\Administrator\AppData\Local\Google\Chrome\Application
3.优势:甚至可以本地页面调试线上接口。。。

可是这样手机做测试没用呀

关键字 vue proxytable axios

vue2 proxytable无效 是由于axios.defaults.baseURL,如果其为完整地址如http://api.51app.cn 则proxytable无效

最终代码

config/index.js
'/apiProxy': {
    target: 'http://api.51app.cn', // 接口域名
    changeOrigin: true, //是否跨域
    pathRewrite: {
        '^/apiProxy': '/' //将虚拟的apiProxy去掉
    }
}
判断/apiProxy开头的接口做代理

config.js

devHost对应的是axios.defaults.baseURL

const devHost = '//192.168.119.120:9160'
const devHost = '//api.51app.cn/gameapi' ==>const devHost = '/apiProxy/gameapi'
开发时,若需要请求线上接口,则改为/apiProxy/gameapi,即可通过Proxy获取数据
其他前缀的接口 记得页加上/apiProxy

再一个这个代理可能会有缓存,去掉代理的代码后,接口还是能跨域,后来重新install个项目发现还是跨域,可能和容器的缓存有关系


参考资料:
奇怪的bug:解决 vue-cli中 proxyTable 配置无效
优雅的解决vue里面跨域、路由冲突问题

相关文章

  • vue简单接口封装 跨域问题处理

    vue接口封装: 第一步:解决跨域 接口请求,一般都会碰到跨域问题,在vue项目中,我们采用页面代理的方法解决跨域...

  • uni-app及vue浏览器跨域问题解决

    以猫眼电影接口为例: 假设请求接口 遇到跨域问题 vue解决跨域 在项目根目录下新建vue.config.js文件...

  • axios跨域和配置proxyTable

    使用vue-axios和vue-resource解决vue中调用网易云接口跨域的问题 vue.js学习之 跨域请求...

  • 处理接口跨域问题(vue)

    前后端分离WEB项目本地开发的跨域问题 vue-cli里有代理设置。但是!!!怕麻烦的话,啥都别说了。不如试试这个...

  • Vue学习笔记(一)

    跨域问题 vue前端跨域问题 1. 利用vue-cli框架与axios结合,访问服务器后端接口,axios不需要太...

  • Vue面试归纳

    1. Vue项目axios跨域 跨域问题出现,使用webpack-dev-server的proxy功能处理 1...

  • 用nginx的反向代理机制解决前端跨域问题

    用nginx的反向代理机制解决前端跨域问题 Vue做前台,后台走接口就会遇到跨域问题。这里Nginx做反向代理是一...

  • vue使用过程中的一些问题解决

    1.接口跨域问题 本地开发项目请求服务器接口的时候,因为客户端的同源策略,导致了跨域的问题,解决方案如下vue.c...

  • Vue 项目解决跨域问题

    vue 项目中解决接口跨域的方法 1.简单粗暴直接用jquery 的jsonp 来调用跨域跨域接口 2.如果本地引...

  • spring boot + VUE跨域处理

    在使用 vue 做前端开发时,碰到 vue 请求接口出现跨域问题。解决的方法,就在后台添加一个跨域请求的过滤器,来...

网友评论

      本文标题:处理接口跨域问题(vue)

      本文链接:https://www.haomeiwen.com/subject/kqganftx.html