Vue 客户端调试的CORS问题
2022-10-25 本文已影响0人
寻找无名的特质
部署环境可以使用Nginx将单页面和api服务器整合到相同域名下,可以解决跨域问题,但在调试环境下不行。
针对vue和webpack开发环境,可以采用客户端代理的方式。原理:Webpack内置的代理不是浏览器,所以不受CORS限制,在开发环境中,就可以使用它作为代理访问需要的Web api。
在vue.config.js中增加devServer配置,并配置代理如下:
devServer: {
port: 8081,
host: "localhost",
https: false,
open: false, // 自动启动浏览器
proxy: {
"/api": {
target: "http://xx.xx.xx.xx/api/", //设置调用的接口域名和端口
changeOrigin: true, //是否跨域
ws:true,
pathRewrite: {
"^/api": ""
}
}
}
}
在proxy中,设置代码名称为"/api",需要访问的web api配置在target中,
这样在代码中如果访问 /api 就会转发到target。