Vue 解决跨域问题

报错：

http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

解决：

项目根目录下新建vue.config.js

module.exports={
    devServer:{
        proxy:{
            '/register':{
                target:'http://localhost:5000/',
                changeOrigin:true,
                pathRewrite:{
                    '^/register/':'/',
                },
            }
        }
    }
}

个人理解：

访问/register的时候，相当于是访问本地的http://localhost:8080/register

然后这个proxy，充当于一个请求转发的作用

它拦截了http://localhost:8080/register这个请求，然后以允许跨域访问的形式去请求

我们上面配置文件中配置的target—http://localhost:5000/register

这是直接对应的

而pathRewrite的作用则是按我们的意愿重写url，而不是直接这样接到target后面

举例：

proxy:{
            '/register':{
                target:'http://localhost:5000/',
                changeOrigin:true,
                pathRewrite:{
                    '^/register':'/registers',
                },
            }
        }

如果我这么配

然后我还是请求/register

则会被proxy重写成

http://localhost:5000/registers

符号解释：

^表示前面的target

pathRewrite则是把^右边的值进行重写