vue-cli怎么解决跨域的问题?
-
vue-cli 主要在本地通过本地服务器拦截转发请求的模式解决跨域问题。
步骤:
- config中设置proxy,这步决定哪种命名规则(比如'/abc/'开头的请求)的请求将被拦截(个人以为是通过改造XMLHttpRequest对象)到本地跨域服务器
- 本地服务器转发请求到目标服务器
- 本地服务器设置允许跨域的headers,然后返回结果,从而解决跨域
跨域问题,除了单机修改浏览器配置外,都是服务器端配合进行解决。
-
在根目录下新建:vue.config.js注意名不能错误,然后里面配置
module.exports = {
devServer: {
proxy: {
//配置跨域
'/api': {
target: '跨域url',
ws: true,
changOrigin: true
// pathRewrite: {
// '^/api': ''
// }
}
}
}
} -
vue-cli无法解决跨域问题。真正解决跨域问的是webpack。只不过vue-cli3.0将webpack的配置继承到了vue.config.js中,才给初学者造成了vue-cli可以解决跨域的错觉。
与在webpack.config.js中配置跨域一样,在vue.config.js中的devServer:{proxy:{}}字段可以编写跨域配置。
具体的配置写法webpack文档写的很清楚。