vue项目使用vue.config.js解决跨域问题

1、为什么出现跨域问题

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy)是一种约定，它是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能受到影响。可以说Web是构建同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）.

2、什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

当前页面url	被请求页面url	是否跨域	原因
http://www.test.com/	http://www.test.com/index.html	否	同源（协议、域名、端口号相同）
http://www.test.com/	https://www.test.com/index.html	是	协议不同（http/https）
http://www.test.com/	http://www.baidu.com	是	主域名不同（test/baidu）
http://www.test.com/	http://blog.test.com	是	子域名不同（www/blog）
http://www.test.com:8080/	http://www.test.com:3008/	是	端口号不同（8080/3008）

3、vue项目如何解决跨域

项目环境版本
node 14.16.0（不一定改变也可）
vue-cli 4.5.15(vue-cli3.0以上即可)
vue 2.x

前提是你的项目使用vue-cli搭建的，如果不是那么修改的配置文件不一定是vue.config,js

• 项目根目录创建vue.config.js文件
• 添加devServe配置项，配置里面的proxy

跨域报错提示如下

跨域解决参考配置如下
vue.config.js

//需要请求的域名为http://localhost:3000/api/home
module.exports = {
  devServer:{
    proxy:{
      '/api':{ //  /api表示拦截以/api开头的请求路径
        target: 'http://localhost:3000/api/', //跨域的域名
        changeOrigin:true,//是否开启跨域
        pathRewrite:{ // 重写路径
          '^/api':'' // 把/api变为空字符
        }
      }
    }
  }
}

分析过程

• 本来发送url完整域名应该是http://localhost:3000/api/home但是不能这样了，请求方式需要变为api/home开头，proxy代理只有见到api开头的才会被拦截。
• 代理见到/api这个请求之后，拦截之后target中的域名会把url:"api/home"替换成url:“http://localhost:3000/api/api/home”。
• 替换过程中你需要把第二个api替换成空（代理配置中路径重写部分pathRewrite），即最后请求链接时url:“http://localhost:3000/api/home”，使用代理后请求url写成url:"api/home"即可。

一定要注意proxy配置中是/api，注意有斜杠！！！如果写成api就一直是not found报错提示！！！修改了vue.config.js需要npm run serve。服务器的话只要修改了就要npm start。
home.vue

 axios({
      url: "api/home",
    }).then(
      (response) => {
        console.log("请求成功", response.data);
      },
      (error) => {
        console.log("请求失败", error.message);
      }
    );

另外附上服务器端代码
server.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/api/home',function(req,res){
    res.send({
      code:200,
      data:1  
    })
})
module.exports = router;

最后成功提示为

如果不写api，vue.config.js的代码修改成如下设置,hoem.vue和server.js不变。
方法一：

 proxy:{
      '/api':{
        target: 'http://localhost:3000/',
        changeOrigin:true,
        // pathRewrite:{
        //   '^/api':''
        // }
      }
    }

方法二：

 proxy:{
      '/api':{
        target: 'http://localhost:3000/',
        changeOrigin:true,
        pathRewrite:{
          '^/api':'/api'
        }
      }

均成功返回结果。