【前端】几种常见的跨域解决方案
在前端开发中，跨域问题是常见的挑战。以下是几种常见的跨域解决方案：
1. 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;location / {root /var/www/html; # 指定前端应用的根目录index index.html index.htm;}# 配置反向代理location /api/ {proxy_pass http://api.example.com/; # 反向代理到后端 API 服务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
当前端应用请求 http://localhost/api/xyz 时，Nginx 会将这个请求转发到 http://api.example.com/api/xyz，并将响应返回给前端。
注意事项
-
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/; }
2. H5跨域 JSONP方式（通过script标签）
JSONP（JSON with Padding）是一种古老的跨域解决方案。原理是利用
<!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 }])，这样前端页面就可以通过回调函数获取到跨域的数据。
3 .uni-app在manifest.json中配置代理来解决：
"h5": {"devServer": {"https": false,"port": 8080,"proxy": {"/apis": {"target": "https://www.ucharts.cn","changeOrigin": true,"pathRewrite": {"^/apis": ""}}}}
}
这将把以/apis开头的请求代理到https://www.ucharts.cn，从而解决跨域问题。
4. 去掉www前缀
有些情况下，去掉访问地址的www前缀可能会解决跨域问题。这是因为有些服务器配置中，www子域名和主域名被视为不同的域。当去掉www前缀后，可能会使请求在同源策略下被允许。
例如，原本请求www.example.com 会出现跨域问题，尝试访问example.com 可能就不会有跨域限制。但这种方法并不是通用的解决方案，它取决于服务器的具体配置，而且也可能带来一些其他问题，比如搜索引擎优化（SEO）方面的影响等。同时，如果是因为协议、端口不同导致的跨域，这种方法也无法解决。
5. Chrome浏览器的跨域设置（适用于本地临时跨域）
在开发过程中，可能需要临时绕过浏览器的同源策略。可以通过启动Chrome浏览器时添加特定参数来实现：
将谷歌浏览器的桌面快捷方式复制一份，右键属性将**目标（T)😗*的路径后输入–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
这将启动一个禁用Web安全策略的Chrome实例。请注意，这种方法仅适用于开发环境，且存在安全风险，务必谨慎使用。