关于跨域问题的记录

1.引起跨域的问题

问题来源于浏览器的同源策略

分别为三种不同源会引起跨域问题

协议 主机 端口

在一条url中可以分为四个部分

 http  协议
 baidu.com 主机
 80    端口
 /xx/xx/x 文件路径

浏览器要求前三者必须相同。如果有一个不同会引起浏览器跨域问题 流程图

graph TD
网页请求http:127.0.0.1/xxx --> 接口请求http:127.0.0.1:8080/xxx

以上网页请求的url与接口请求的url不一致导致的跨域问题

2.vite配置本地代理解决跨域

在vite中可以在defineConfig函数中传一个对象里面设置一个server属性从而进行本地代理的配置。

server:{
    proxy:{  //配置本地代理
        "/api":{   //匹配的路径
             target: "https://u.y.qq.com", //目标url
             changeOrigin: true,  //跨域
        }  
    }
}

这样在请求中只需要填写后续的文件路径既可发起请求获取资源

fetch("/api/index")
    .then(res=> res.json())
    .then(res=>{})

流程图为

graph TD
网页请求http:127.0.0.1/xxx --> 本地接口代理请求http:127.0.0.1/xxx -->实际服务器地址http:127.0.0.1:8080/xxx

这是在客户端内部完成。

其数据请求是服务端向客户端发送，最后客户端(后端应用)发送至客户端（网页应用）

相当于在客户端内部启了一个后端程序向服务端发起请从而绕开了浏览器的同源问题。

nginx反向代理

反向代理与本地代理相反。本地代理是客户端搞定的，反向代理就是服务端搞定的

    #通过配置nginx文件既可
    
    events{}

http{
    include       mime.types;
    default_type  application/octet-stream;
    server{
        listen 80;
        server_name 127.0.0.1;
        root D:/nginx-1.26.1/dist;
        index index.html;
        location / {
   
               location /api {
                proxy_pass http://127.0.0.1:8080/;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;

                # 解决跨域问题
                add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, HEAD, PUT, DELETE";
                add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization, User-Agent, DNT";
                add_header Access-Control-Max-Age 86400;

                
            }
        }
    }
}

流程图为

graph TD
服务端127.0.0.1:8080 --> 服务端127.0.0.1 --> 网页端127.0.0.1

其中根据上面配置 网页端的接口请求需要添加/api进行匹配否则无法成功，相当于网页端接口请求需要改为http://127.0.0.1/api/xxxx 这样的形式

反向代理的是在服务端内部完成。

是服务端（数据应用）向服务端（网页应用）发送数据， 服务端向客户端发送数据 其本质是在服务端（网页应用）通过配置Access-Control-Allow-Origin * 来解决跨域问题。相当于对后端接口进行了统一的cors配置

Access-Control-Allow-Origin: * 值表明，该资源可以被任意外源访问。