代理服务器解决前端跨域

1，跨域问题的本质：浏览器的同源策略（同源：相同协议：http和https；相同主机：HostName；相同端口：port）

2，解决问题的方法：充当客户端，隐藏真实的跨域请求，使浏览器认为是同源请求。

前端通过axios发起请求时，首先到达代理服务器，代理服务器将请求转发给实际的API。

3，常用的代理服务器：

3.1 Nginx：开源HTTP服务器，用于反向代理，负载均衡

规则：

server {  listen 80; # 或其他端口  server_name your-proxy-domain.com; # 代理服务器域名或IP  location /api {  proxy_pass http://backend-api-url.com:port/api; # 后端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;  # 如果后端需要，添加其他必要的代理头或配置  } }

备注：在端口80下，用/api 代理 proxy_pass

3.2 Node.js 中间件  http-proxy-middleware 基于Node.js 的开发环境中 （一般不用于生产）

规则：在项目配置文件中（vue.config.js）

module.exports = {  // ...  devServer: {  proxy: {  '/api': {  target: 'http://backend-api-url.com:port',  changeOrigin: true,  pathRewrite: { '^/api': '' }, // 重写请求路径，去掉/api前缀（可选）  onProxyReq: (proxyReq, req, res) => {  // 添加自定义请求头或其他处理（可选）  },  },  },  }, };