前后端分离项目，跨域问题解决方案

1 什么是跨域？

同源策略即：同一协议，同一域名，同一端口号。当其中一个不满足时，我们的请求即会发生跨域问题。

示例	跨域原因
www.jd.com 与 www.taobao.com	域名不同
www.jd.com:8081 与 www.jd.com:8082	域名相同，端口不同
item.jd.com 与 item2.jd.com www.baidu.jd.com 与 www.baidu.tieba.com	二级域名不同

跨域问题 是针对ajax请求的一种限制。只有发送ajax请求才会发生跨域问题.

跨域不一定会有跨域问题。因为跨域问题是浏览器对于ajax请求的一种安全限制：一个页面发起的ajax请求，只能是于当前页同域名的路径，这能有效的阻止跨站攻击。

2 解决跨域问题的方案

1、JSONP

JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。

核心思想：网页通过添加一个<script>元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。

1 原生实现:

<script src="http://test.com/data.php?callback=dosomething"></script>
// 向服务器test.com发出请求，该请求的查询字符串有一个callback参数，用来指定回调函数的名字
 
// 处理服务器返回回调函数的数据
<script type="text/javascript">
    function dosomething(res){
        // 处理获得的数据
        console.log(res.data)
    }
</script>

2 JQuery ajax实现：

$.ajax({
    url: 'http://www.test.com:8080/login',
    type: 'get'
    dataType: "jsonp",  // 请求方式为jsonp
    data: {'a': 1},
    success: function(data){
        console.log(data);
    }
});

3 Vue.js 实现:

this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) => {
    console.log(res); 
})

2 前端解决方案

在开发环境，前端可以通过在vite.config.ts 中配置代理服务器。但是如果需要代理多个地址，比如： ‘/’  指向 192.168.1.1，‘/api’ 指向 192.168.1.2，‘/api/network’ 指向 192.168.1.3。

module.exports = definConfig({
  devServer: {
    proxy: {
      "/api/network": {
        target: "http://192.168.1.1:8080", // 目标路径
        changeOrigin: true, // 改变请求源
        secure: false, // 不使用HTTPS
        pathRewrite：{
            '^/api/network': ''
        }
      },
      "/api": { // 所有通过/api的请求都会代理到下面http://192.168.1.2:8080
        target: "http://192.168.1.2:8080",
        changeOrigin: true,
        secure: false,
        //移除url里面的api,比如 /api/user/login 代理过来就行http://192.168.1.2:8080/user/login
        pathRewrite：{
            '^/api': ''
        }
      },
      "/": {
        target: "http://192.168.1.3:8080",
        changeOrigin: true,
        secure: false,
        pathRewrite：{
            '^/': ''
        }
      },
    },
  },
});

需要在接口前面添加比如“/api/user/login”,，或在url后面添加“/api”

配置中的地址与请求地址中匹配的字符越少，符合度越低

上例中配置中的地址（/）与请求地址（/api）只有一个字符是匹配的，所以符合度低。注意：这只会在开发环境中生效，打包后的代码并不会使用代理设置。如果需要在生产环境中使用代理，可以考虑在服务器端进行配置。

3 后端服务器配置代理

在vite.config.ts 配置的代理服务器，在本地启动起来是可以的并且不会有跨域问题，放在服务器上代理就失效了，就需要配置代理服务器nginx。

Nginx ("engine x"）是一个高性能的HTTP和反向代理服务器,特点是占有内存少，并发能力强，事实上nginx.的并发能力确实在同类型的网页服务器中表现较好Nginx,专为性能优化而开发,性能是其最重要的考量,实现上非常注重效率，能经受高负载的考验,有报告表明能支持高达50,000个并发连接数。
 

server {
    listen       8089;       #监听的端口号
    server_name  localhost;  #浏览器通过访问这个地址和端口就能请求到nginx 
   
     location / {  
         proxy_pass http://127.0.0.1:5173/;   #这个为前端项目的访问地址
         #root   html;
         #index  index.html index.htm;   
    }
    location /api/ {   
        #前端向后端发出地址请求http://localhost:8089/api/user/login
        #就会将地址替换成 http://localhost:8050/user/login
          proxy_pass http://localhost:8050/;
    }

————————————————