vue 跨域问题

2019-07-30 22:31:00 +08:00
 skyhigh89

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.

2358 次点击
所在节点    程序员
7 条回复
skyhigh89
2019-07-30 22:32:06 +08:00
一样的，get 谷歌也不行， 服务器端可以， 请问客户端调试需要加什么呢？我用 nuxt， 也只能在 asyncData 中 get 到
hahaayaoyaoyao
2019-07-30 22:33:42 +08:00
代理
shenyu1996
2019-07-30 22:49:12 +08:00
用 webpack 的话 https://webpack.js.org/configuration/dev-server/#devserverproxy
shintendo
2019-07-31 11:17:08 +08:00
不知道你了解多少，我就解释得啰嗦一点。

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

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

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

如果是 nuxt 起的项目，原理类似，配置方式有所不同，可以看 nuxt 文档。
skyhigh89
2019-07-31 11:41:08 +08:00
thank you all 遇到大神了
ztxcccc
2019-07-31 16:51:45 +08:00
你个人开发的话，装了 chrome 插件就行了，搜 CORS 就行
ivancai
2019-07-31 20:04:06 +08:00
如果 api 支持 jsonp 的话,可以用 axios-jsonp 拓展解决
https://www.npmjs.com/package/axios-jsonp

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://tanronggui.xyz/t/587669

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX