随笔- 245 文章- 0 评论- 10 阅读- 47万

vue开发环境跨域配置，部署nginx，反向代理配置，跨域配置

1.nginx当后端的服务给前端请求

location / {
    # 允许跨域的请求，可以自定义变量$http_origin，*表示所有
    add_header 'Access-Control-Allow-Origin' *;
    # 允许携带cookie请求
    add_header 'Access-Control-Allow-Credentials' 'true';
    # 允许跨域请求的方法：GET,POST,OPTIONS,PUT
    add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT';
    # 允许请求时携带的头部信息，*表示所有
    add_header 'Access-Control-Allow-Headers' *;
    # 允许发送按段获取资源的请求
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    # 一定要有！！！否则Post请求无法进行跨域！
    # 在发送Post跨域请求前，会以Options方式发送预检请求，服务器接受时才会正式请求
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        # 对于Options方式的请求返回204，表示接受跨域请求
        return 204;
    }
}

2.vue开发环境，跨域代理配置

devServer: {
    publicPath, // 和 publicPath 保持一致
    disableHostCheck: process.env.NODE_ENV === 'development', // 关闭 host check，方便使用 ngrok 之类的内网转发工具
    proxy: {
      //配置跨域
      "/api": {
        // target: "http://192.168.1.221:6050",
        target: "https://git.xxx.com:10988",
        ws: true, //启用WebSocket代理，允许在开发服务器上进行WebSocket通信
        changeOrigin: true, //允许跨域
        pathRewrite: { 
          // 这里理解成用'/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替 
          // 比如我要调用'http://www.xxx.com/user/add'，直接写'/api/user/add'即可'
          '^/api': '/'   //用于重写请求路径的配置对象。在这里，它将以/api开头的请求路径重写为根路径（/）。
        }
      },
    },
  },

3.vue部署到nginx配置反向代理，处理跨域

location /api/ {
    #proxy_pass https://xx.com;
    proxy_pass https://git.xxx.com:10988/;
}

其他：

location / {
      proxy_pass http://127.0.0.1:8090/;       # 注意改成你实际使用的端口
      rewrite ^/(.*)$ /$1 break;
      proxy_redirect off;
      proxy_set_header Host $host;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Upgrade-Insecure-Requests 1;
      proxy_set_header X-Forwarded-Proto https;
    }

是用于Nginx的location指令，它定义了一个特定的URL路径的反向代理规则。让我来逐行解释每个配置的含义：

proxy_pass http://127.0.0.1:8090/;: 这行指令指定了反向代理的目标地址，即将请求代理到的后端服务器的地址。在这个例子中，请求将被代理到本地的127.0.0.1地址的端口8090上。
rewrite ^/(.*)$ /$1 break;: 这行指令使用正则表达式进行URL重写。它将匹配所有的URL路径，并将其重写为相同的路径。这个指令的作用是确保代理的路径保持不变。
proxy_redirect off;: 这行指令禁用代理服务器对响应头中的Location字段进行重写。它确保后端服务器返回的重定向URL不会被修改。
proxy_set_header Host $host;: 这行指令设置代理请求的头部信息中的Host字段。它将保持与客户端请求的Host字段相同。
proxy_set_header X-Forwarded-Proto $scheme;: 这行指令设置代理请求的头部信息中的X-Forwarded-Proto字段。它将保持与客户端请求的协议相同。
proxy_set_header X-Real-IP $remote_addr;: 这行指令设置代理请求的头部信息中的X-Real-IP字段。它将保持与客户端请求的真实IP地址相同。
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;: 这行指令设置代理请求的头部信息中的X-Forwarded-For字段。它将保持与客户端请求的X-Forwarded-For字段相同。
proxy_set_header Upgrade-Insecure-Requests 1;: 这行指令设置代理请求的头部信息中的Upgrade-Insecure-Requests字段为1。它用于指示后端服务器将HTTP请求升级为HTTPS请求。
proxy_set_header X-Forwarded-Proto https;: 这行指令设置代理请求的头部信息中的X-Forwarded-Proto字段为https。它用于指示后端服务器请求是通过HTTPS协议进行的。