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。
上一篇下一篇

猜你喜欢

热点阅读