search

haizlin / fe-interview

前端面试每日 3+1，以面试题来驱动学习，提倡每日学习与思考，每天进步一点！每天早上5点纯手工发布面试题（死磕自己，愉悦大家），6000+道前端面试题全面覆盖，HTML/CSS/JavaScript/Vue/React/Nodejs/TypeScript/ECMAScritpt/Webpack/Jquery/小程序/软技能……
http://www.h-camel.com
MIT License
25.49k stars 3.26k forks source link

[vue] vue-cli怎么解决跨域的问题？ #487

Open haizhilin2013 opened 5 years ago

haizhilin2013 commented 5 years ago

[vue] vue-cli怎么解决跨域的问题？

xn213 commented 5 years ago

dev > 代理 devServer.proxy pro > ng( 待 todo )

boundless-qi commented 5 years ago

axios 设置代理

LonHon commented 5 years ago

vue-cli 主要在本地通过本地服务器拦截转发请求的模式解决跨域问题。

步骤：

  1. config中设置proxy，这步决定哪种命名规则（比如'/abc/'开头的请求）的请求将被拦截（个人以为是通过改造XMLHttpRequest对象）到本地跨域服务器
  2. 本地服务器转发请求到目标服务器
  3. 本地服务器设置允许跨域的headers，然后返回结果，从而解决跨域

跨域问题，除了单机修改浏览器配置外，都是服务器端配合进行解决。

liuxiaoyang1 commented 4 years ago

在根目录下新建：vue.config.js注意名不能错误，然后里面配置 module.exports = { devServer: { proxy: { //配置跨域 '/api': { target: '跨域url', ws: true, changOrigin: true // pathRewrite: { // '^/api': '' // } } } } }

ajh99990 commented 4 years ago

vue-cli无法解决跨域问题。真正解决跨域问的是webpack。只不过vue-cli3.0将webpack的配置继承到了vue.config.js中，才给初学者造成了vue-cli可以解决跨域的错觉。 与在webpack.config.js中配置跨域一样，在vue.config.js中的devServer:{proxy:{}}字段可以编写跨域配置。 具体的配置写法webpack文档写的很清楚。