【前端】几种常见的跨域解决方案&代理的概念

---

在 Web 开发中，跨域问题是指浏览器从一个域名的网页去请求另一个域名的资源时，由于同源策略的限制，请求会被阻止。
解决跨域问题需要可能从后端、中间件、前端等方向入手。

一、常见的跨域解决方案

1. 服务端配置CORS（Cross-Origin Resource Sharing）：

通过在服务器端设置响应头Access-Control-Allow-Origin来允许特定源的跨域请求。
支持多种HTTP方法，如GET、POST、PUT、DELETE等。
示例代码（PHP）：

header('Access-Control-Allow-Origin: *');

2. Nginx代理

使用 Nginx 设置代理解决跨域问题的一种常见方式。Nginx 会充当一个中间代理服务器，接收来自前端的请求并将其转发到实际的后端 API 服务，从而避免跨域问题。

1. 在服务器上安装 Nginx
   使用以下命令安装Nginx：

   • Ubuntu/Debian:

     sudo apt update
     sudo apt install nginx
     

   • CentOS/RHEL:

     sudo yum install nginx
     

2. 配置 Nginx 代理

   打开 Nginx 的配置文件，通常是在 /etc/nginx/nginx.conf 或者 /etc/nginx/sites-available/default，根据你的操作系统和 Nginx 安装方式来决定。

   下面是一个示例配置，假设你的前端应用在 http://localhost:8080，后端 API 服务在 http://api.example.com。

   server {
       listen 80;
   
       # 前端应用访问的地址
       server_name localhost;
   
      # 代理：`http://localhost`→`http://example.com`
       location / {
           root /var/www/html;  # 指定前端应用的根目录
           index index.html index.htm;
       }
   
       # 反向代理：分发到不同的后端 API 服务
       location /api/ {
           proxy_pass http://api.example.com/;  
           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;
       }
        location /websocket/ {
           proxy_pass http://websocket.example.com/;  
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           pr