Nginx 解决异步请求跨域问题【譬如JS前端异步请求】

十年河东，十年河西，莫欺少年穷

学无止境，精益求精

一、Nginx

关于Nginx的用途，听到最多的两个词，就是：

端口转发
负载均衡

负载均衡不属于现阶段要学习的内容，重点来看一看端口转发，本文用它来解决跨域请求的问题。

二、CROS 跨域资源共享

我们需要知道，同源的三要素：协议【http协议、https协议】、域名、端口。

如果比较两个地址，只要三者中只要有任何一个不同，就算跨域。

// 协议：http
// 域名：localhost
// 端口：8011

http://localhost:8011

出于安全原因，浏览器限制从脚本（比如JavaScript）内发起的跨源HTTP请求。

如果浏览器检测到跨域，它会尝试发起一次请求，然后查看返回的内容中，是否一个有允许跨域请求的标记（CORS响应头），如果有正确的标记，那么就不拦截；如果没有标记，浏览器就会阻止这个请求。并报错。

三、项目中为何产生跨域

在前后台分离的项目中，前台和后台分别运行在不同的端口上。

所以前台向后台发起异步请求时，会因为跨域，而被浏览器拦截下来。

这时解决方案是使用Nginx 配置被访问的服务器允许跨域请求。

四、Nginx 实例配置

假设我们有两台服务器【同一个服务器，但端口不同】

服务器1:

 server{
    listen 80;
    server_name localhost;
    location / {
    root /html/index.html;
    }
 }

服务器2：

 server {
        listen       8001;
        server_name  localhost;

#    default_type  application/octet-stream;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location /getuser {

            default_type  application/json;
            return 200 '{id:"abc":"age":12}';
            
        }
}

现在如果让服务器1的index.html 页面通过Jqury去异步访问服务器2的getuser方法、则会产生跨域问题。

那么如何解决呢？

我们只需在被访问的服务器Location节中加入允许跨域的声明即可。

如下：

        location /getuser {
               add_header Access-Control-Allow-Origin *; # http://192.168.136.135 OR  http://192.168.136.135:8088 
            add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE;
            default_type  application/json;
            return 200 '{id:"abc":"age":12}';
            
        }

Allow-Origin 后面的 * 代表所有不同源的地址均可以异步访问，如果要指定域名/IP，可以使用诸如 http://www.xx.com 如果是多个Ip或域名，则域名/Ip之间用空格分开即可，譬如：http://192.168.136.135 http://192.168.136.135:8088

Allow-Methods 后面是允许的方法，POST请求 GET请求等

最后贴出我们配置