vue 跨域问题

开发环境下与后端对接时报错如下

报错信息

Access to XMLHttpRequest at 'http://localhost:5000/plan' from origin 'http://localhost:8888' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

报错原因

查了下是跨域问题
网站开发中的同源策略导致 不同源的地址下的资源不能使用导致

我的开发环境中 vue项目的 地址 http://localhost:8888, 后端接口的地址 http://localhost:5000
所以同源策略导致 后端返回的资源前端不能使用

当然不同地址一般发生在开发环境中 生产环境中大部分情况 后端代码与前端代码是在一个地址下的

解决办法

跨域问题解决思路有两种

前端解决

> 我这里是vue项目 就直接按照vue的办法去解决 当然其他框架肯定早已有前辈们帮我们填坑了 只需动动你   的小手指在网上找找就行

vue cli版本4.x
大致分两步：

1. vue项目根目录新建 名为vue.config.js 的js文件 如果已经有了就直接在里边配置

module.exports = {
    devServer: {
        /* 使用代理 */
        proxy: {
            '/api': {
                /* 目标代理服务器地址 这里是我自己的后端地址 */
                target: 'http://localhost:5000/',
                /* 是否允许跨域 */
                changeOrigin: true,
                // ws: true,  //代理websockets
                pathRewrite:{
                    '^/api':''//重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
                }
            },
        },
    },
}

2. 找到你项目中的axios
   设置baseurl

axios.defaults.baseURL = '/api';

我网上找了很多方法都是之说了第一步 然后测试还是老样子
我这边加上第二步后正常了

当然后边还 测试了下只设置代理也是行得通的

1. vue.config.js文件中

module.exports = {
    devServer: {
        /* 使用代理 */
        proxy: 'http://localhost:5000'
    },
}

2.axios设置

  axios.defaults.baseURL = '';

后端解决

根据异常信息提示 No 'Access-Control-Allow-Origin' header is present on the requested resource.
response header中没有 Access-Control-Allow-Origin字段 想要那就给你
后端返回数据添加

response.headers["Access-Control-Allow-Origin"] = '*'

但是这里测试的如果 vue中 axios.defaults.baseURL= 还是后端的地址的话是没有效果的 可以设置为空字符串或者其他字符串有效

以上。。。请笑纳 有问题欢迎留言讨论