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

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

一、常见的跨域解决方案
- 1. 服务端配置CORS（Cross-Origin Resource Sharing）：
- 2. Nginx代理
- 3. Vue CLI配置代理：
- 4 .uni-app在`manifest.json`中配置代理来解决：
- 5. 使用WebSocket通讯
- 6. H5跨域 JSONP方式（通过script标签）
- 7. 去掉www前缀
- 8. Chrome浏览器的跨域设置（适用于本地临时跨域调试）
二、代理的概念

在 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 服务，从而避免跨域问题。

在服务器上安装 Nginx
使用以下命令安装Nginx：
- Ubuntu/Debian:
```
sudo apt update
sudo apt install nginx
```
- CentOS/RHEL:
```
sudo yum install nginx
```

配置 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;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}
}

proxy_pass http://api.example.com/;: 将所有 /api/ 路径的请求转发到 http://api.example.com。
proxy_set_header 相关指令用于转发客户端的请求头信息到后端服务器，这样后端可以获得真实的请求信息。

重载 Nginx 配置
在修改 Nginx 配置文件后，需要重载 Nginx，使配置生效：
```
sudo nginx -s reload
```
CORS 头部：如果后端已经配置了 CORS 头部，那么你可以在 Nginx 上的代理配置中添加相关的 CORS 头部，或者在后端服务中处理：

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;# CORS 头部add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';add_header Access-Control-Allow-Headers 'Origin, X-Requested-With, Content-Type, Accept, Authorization';
}

路径重写：有时需要在代理时对路径进行重写。例如，前端请求 /api，但后端实际接收的路径是 /v1/api，这时可以使用 rewrite 来修改请求路径：

location /api/ {rewrite ^/api/(.*)$ /v1/$1 break;proxy_pass http://api.example.com/;
}

3. Vue CLI配置代理：

module.exports = {
devServer: {
proxy: {
‘/api’: {
target: ‘http://localhost:8818’,
changeOrigin: true,
pathRewrite: { ‘^/api’: ‘’ }
}
}
}
};

4 .uni-app在`manifest.json`中配置代理来解决：

针对uni-app框架有专门的配置方法。

"h5": {"devServer": {"https": false,"port": 8080,"proxy": {"/apis": {"target": "https://www.ucharts.cn","changeOrigin": true,"pathRewrite": {"^/apis": ""}}}}
}

这将把以/apis开头的请求代理到https://www.ucharts.cn，从而解决跨域问题。

5. 使用WebSocket通讯

传统的 HTTP 请求会受到同源策略的严格约束，而 Websocket 协议不受同源策略的限制。WebSocket通过“ws://"(非加密)或“wss://”(加密)协议进行通信，连接建立后，全双工通信得以实现，并且不遵循 HTTP 的同源策略。

6. H5跨域 JSONP方式（通过script标签）

JSONP（JSON with Padding）是一种古老的跨域解决方案。
原理是利用< script >标签的src属性不受同源策略限制的特点。
适用于GET请求，不适用于POST等其他类型请求。

<!DOCTYPE html> 
<html lang="en"> <head> <meta charset="UTF-8"> <title>JSONP跨域示例</title> 
</head> <body> <script> function jsonpCallback(data) { console.log(data);  } </script> <script src="http://目标服务器地址?callback=jsonpCallback"></script> 
</body> </html>

这里http://目标服务器地址是提供数据的服务器地址，callback=jsonpCallback是将回调函数名作为参数传递给服务器，服务器收到请求后，会将数据包装在回调函数中返回，例如返回的数据可能是jsonpCallback([{ "name": "张三", "age": 25 }])，这样前端页面就可以通过回调函数获取到跨域的数据。

7. 去掉www前缀

有些情况下，去掉访问地址的www前缀可能会解决跨域问题。这是因为有些服务器配置中，www子域名和主域名被视为不同的域。当去掉www前缀后，可能会使请求在同源策略下被允许。

例如，原本请求www.example.com会出现跨域问题，尝试访问example.com 可能就不会有跨域限制。但这种方法并不是通用的解决方案，它取决于服务器的具体配置，而且也可能带来一些其他问题，比如搜索引擎优化（SEO）方面的影响等。同时，如果是因为协议、端口不同导致的跨域，这种方法也无法解决。

8. Chrome浏览器的跨域设置（适用于本地临时跨域调试）

在开发过程中，可能需要临时绕过浏览器的同源策略——启动一个禁用Web安全策略的Chrome实例。
请注意，这种方法仅适用于开发环境，且存在安全风险，务必谨慎使用。
通过启动Chrome浏览器时添加特定参数来实现：

将谷歌浏览器的桌面快捷方式复制一份，右键属性将目标的路径后输入

--disable-web-security --disable-web-security --user-data-dir=C:\chromTest参数

参考：

"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-web-security --user-data-dir=C:\chromTest

在这里插入图片描述

二、代理的概念

常用的代理技术分为正向代理、反向代理和透明代理。
正向代理：将多个不同域名的网站请求统一到一个目标服务器请求
反向代理：将多个不同域名的网站请求根据需要分发给不同的后端应用服务器
透明代理：一种网络中间件，它能够在用户不知情的情况下拦截和转发网络流量。这种代理不需要在用户端配置特定的代理设置，而是通过在网络层面拦截流量来实现代理功能。
在这里插入图片描述