使用 Nginx 转发请求。把跨域的接口写成调本域的接口，然后将这些接口转发到真正的请求地址。

原文: 别整复杂了！Nginx 可以轻松搞定跨域问题

跨域主要涉及4个响应头：

  • Access-Control-Allow-Origin 用于设置允许跨域请求源地址 （预检请求和正式请求在跨域时候都会验证）
  • Access-Control-Allow-Headers 跨域允许携带的特殊头信息字段 （只在预检请求验证）
  • Access-Control-Allow-Methods 跨域允许的请求方法或者说HTTP动词 （只在预检请求验证）
  • Access-Control-Allow-Credentials 是否允许跨域使用cookies，如果要跨域使用cookies，可以添加上此请求响应头，值设为true（设置或者不设置，都不会影响请求发送，只会影响在跨域时候是否要携带cookies，但是如果设置，预检请求和正式请求都需要设置）。不过不建议跨域使用（项目中用到过，不过不稳定，有些浏览器带不过去），除非必要，因为有很多方案可以代替。

准备： 前端网站地址：http://localhost:8080 服务端网址：http://localhost:59200

nginx配置：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

server {  
    listen       22222;  
    server_name  localhost;  
    location  / {  
        if ($request_method = 'OPTIONS') {  
            add_header Access-Control-Allow-Origin 'http://localhost:8080';  
            add_header Access-Control-Allow-Headers '*';  
            add_header Access-Control-Allow-Methods '*';  
            add_header Access-Control-Allow-Credentials 'true';  
            return 204;  
        }  
        if ($request_method != 'OPTIONS') {  
            add_header Access-Control-Allow-Origin 'http://localhost:8080' always;  
            add_header Access-Control-Allow-Credentials 'true';  
        }  
        proxy_pass  http://localhost:59200;   
    }  
}

参考