V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
skyhigh89
V2EX  ›  程序员

vue 跨域问题

  •  
  •   skyhigh89 · 2019-07-30 22:31:00 +08:00 · 2267 次点击
    这是一个创建于 1930 天前的主题,其中的信息可能已经有所发展或是发生改变。

    vue 前端 axios.get 调用 node 接口,出现 cors 跨域问题, 可以前端解决么? 我在 node 可以调用 api this.data = await axios.get('https://www.okex.com/api/spot/v3/instruments')

    Access to XMLHttpRequest at 'https://www.google.com/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    7 条回复    2019-07-31 20:04:06 +08:00
    skyhigh89
        1
    skyhigh89  
    OP
       2019-07-30 22:32:06 +08:00
    一样的,get 谷歌也不行, 服务器端可以, 请问客户端调试需要加什么呢?我用 nuxt, 也只能在 asyncData 中 get 到
    hahaayaoyaoyao
        2
    hahaayaoyaoyao  
       2019-07-30 22:33:42 +08:00 via Android
    代理
    shenyu1996
        3
    shenyu1996  
       2019-07-30 22:49:12 +08:00
    shintendo
        4
    shintendo  
       2019-07-31 11:17:08 +08:00   ❤️ 1
    不知道你了解多少,我就解释得啰嗦一点。

    跨域(同源策略)是浏览器对网页的限制,所以 1.当然不可能通过网页代码解决,2.在非浏览器环境如 node、asyncData 当然也没有问题。

    解决方式:
    如果是 vue-cli 的项目,npm run serve 会起一个开发服务器,你的页面在 localhost 上,请求也发往 localhost,这样就不跨域了,然后 localhost 上的开发服务器再帮你把请求转发到真正的远程接口上。这个代理关系在 vue.config.js 里配置,具体见 vue-cli 文档。

    需要注意的是,这个是开发服务器的代理功能,解决的仅是开发时的跨域问题,发布到线上就没有了,所以要保证你的线上页面和你的接口是在一个地方的,不然还是会有跨域,那样就需要接口端的配置才能解决了。( nuxt ssr 项目自带线上 node 服务器,可以无视这条)

    如果是 nuxt 起的项目,原理类似,配置方式有所不同,可以看 nuxt 文档。
    skyhigh89
        5
    skyhigh89  
    OP
       2019-07-31 11:41:08 +08:00
    thank you all 遇到大神了
    ztxcccc
        6
    ztxcccc  
       2019-07-31 16:51:45 +08:00
    你个人开发的话,装了 chrome 插件就行了,搜 CORS 就行
    ivancai
        7
    ivancai  
       2019-07-31 20:04:06 +08:00
    如果 api 支持 jsonp 的话,可以用 axios-jsonp 拓展解决
    https://www.npmjs.com/package/axios-jsonp
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1129 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 18:24 · PVG 02:24 · LAX 10:24 · JFK 13:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.