解决vue项目跨域问题

1.什么是跨域？

遇到Access-Control-Allow-Origin那就说明跨域了
跨域是因为浏览器的同源策略所导致，同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，同源是指：域名、协议、端口相同。如果其中有一项不同，即出现非同源请求，就会产生跨域。

注：跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了

2.解决办法：使用Proxy代理

Proxy也称为网络代理，是一种特殊的网络服务，允许一个客户端通过这个服务与另一个网络终端（一般为服务器）进行非直接的连接，一些网关、路由器等网络设备就具有网络代理功能。一般认为代理服务有利于保障网络终端的隐私或安全，防止服务器被攻击。

解决跨域示意图：

注：1.跨域问题是出现在浏览器和服务器之间的，服务器之间没有
2.通过配置代理服务器，让代理服务器去访问后台服务器，服务器之间的访问就不会被策略同源给管理到，所有前端所有的操作都通过代理服务器去范围，就可以实现跨域操作。

代码：

• 在vue项目中的vue.config.js中设置如下代码片段

module.exports = {
    
    
   lintOnSave: false,//设置是否在开发环境下每次保存代码时都启用 eslint验证。
   devServer: {
    
      //还可能是server
    proxy: {
    
     //配置跨域
     '/api': {
    
     //api是需要转发的请求(所有带有/api前缀的请求都会转发给http://127.0.0.1:5173)
       target: 'http://localhost:8080',//配置转发目标地址(能返回数据的后端服务器地址，此例为http://localhost:8080)
       changeOrigin: true,//控制服务器接收到的请求头中host（主机地址）字段的值,true返回后端服务器host，false返回客户端的host
       pathRewrite: {
    
    
         '^/api': 'api'//去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)，重写请求路径，将不属于请求路径的/api替换为api，加api是为了让他知道转发给谁
       }
     }
   }
   },
 }

网络请求配置

import axios from 'axios';
// 环境的切换:开发，测试，生产
axios.defaults.baseURL="/api"
axios.defaults.withCredentials=true;//允许跨域