default

反向代理 & 跨域配置

更新时间:2023-12-13阅读整篇大约3分钟

由于跨域机制，在我们请求一些接口时需要去配置代理来帮助我们完成请求，在本地开发可以开启proxy，而上线之后，则需要通过Nginx来进行代理

nginx
# 一个简单的反向代理示例,访问本机localhost跳转到百度
server{
    listen 80;
    server_name localhost;
    location / {
        proxy_pass http://www.baidu.com;
    }
}

除了proxy_pass之外，还存在一些额外的指令，比如：

  • 改变头信息的proxy_set_header,他将在客户端请求发送给后端服务器之前，更改来自客户端的请求头信息。

  • proxy_connect_timeout，配置与后端服务器尝试建立连接的超时时间

  • proxy_read_timeout：配置 Nginx 向后端服务器组发出 read 请求后，等待相应的超时时间；

  • proxy_send_timeout：配置 Nginx 向后端服务器组发出 write 请求后，等待相应的超时时间；

  • proxy_redirect：用于修改后端服务器返回的响应头中的 Location 和 Refresh。

利用反向代理解决跨域

同源3大条件，同端口 同IP 同协议，如果有一个front.test.com 向 back.test.com发起一个网络请求，那么会导致跨域的出现，如何去解决呢

nginx
# front.test.com
server{
    listen 80;
    server_name front.test.com;
    location / {
        proxy_pass back.test.com;
    }
}

这样通过反向代理，就对front.test.com的请求全部代理到了back.test.com,前端(front.test.com)的请求都被nginx代理到了后端(back.test.com)下，这样后端认为是back.test.com向他发起的请求，这时符合同源策略，便不会出现跨域

配置header解决跨域

依旧是如果有一个front.test.com 向 back.test.com发起一个网络请求，那么会导致跨域的出现，如何去解决呢，我们也可以从跨域的服务器上设置nginx，这样前端是无感的，一次解决不同前端服务跨域问题

nginx
# back.test.com
scrver{
    listen 80;
    server_name back.test.com;
    add_header 'Access-Control-Allow-Origin'$http_origin;   # 全局变量获得当前请求origin，带cookie的请求不支持*
    add_header 'Access-Control-Allow-Credentials''true';    # 为 true 可带上 cookie
    add_header 'Access-Control-Allow-Methods''GET, POST, OPTIONS';  # 允许请求方法
    add_header 'Access-Control-Allow-Headers'$http_access_control_request_headers;  # 允许请求的 header，可以为 *
    add_header 'Access-Control-Expose-Headers''Content-Length,Content-Range';
    # preflight
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Max-Age' 1728000;   # OPTIONS 请求的有效期，在有效期内不用发出另一条预检请求
        add_header 'Content-Type''text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 200;
    }
    location / {
		root  /usr/share/nginx/html/;
		index index.html;
	}
}