美文网首页
处理接口跨域问题(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)

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