angularjs - 允许 Nginx 上的 CORS 与 AngularJS HTTP GET 一起工作

Question

我的控制台中不断出现此错误:

XMLHttpRequest cannot load http://d.biossusa.com/api/distributor?key=****. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

我知道我有一个 CORS 问题。我正在尝试修复它。请在下面查看我的步骤。

---

第一次尝试

我已经尝试在我的前端添加配置。

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

  <p>Today's welcome message is:</p>
  <h1>{{myData}}</h1>

</div>

<script>

  var app = angular.module('myApp', []);

  app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
  }

  ]);

  app.controller('myCtrl', function($scope, $http) {
    $http.get("http://d.biossusa.com/api/distributor?key=****")
    .then(function(response) {
        $scope.myWelcome = response.data;
    });
});


</script>

---

我已经尝试在我的 Nginx Configs 的后端服务端添加配置。

我在 Nginx 网站上找到了这个链接 = https://enable-cors.org/server_nginx.html

我已经像这样在我的 nginx 配置中添加了它。

server {

    listen 80;
    server_name d.biossusa.com;
    root /home/forge/d.biossusa.com/distributor-application/laravel/public;

    # Enable this line for debugging to see which php.ini get use ... $php --ini
    # root /home/forge/d.biossusa.com/public;


    # FORGE SSL (DO NOT REMOVE!)
    # ssl_certificate;
    # ssl_certificate_key;

    index index.html index.htm index.php;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;

        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            #
            # Custom headers and headers various browsers *should* be OK with but aren't
            #
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
            #
            # Tell client that this pre-flight info is valid for 20 days
            #
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
         }


         if ($request_method = 'POST') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
            add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
         }


         if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
            add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
         }


    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    access_log off;
    error_log  /var/log/nginx/d.biossusa.com-error.log error;

    error_page 404 /index.php;

    location ~ \.php$ {

        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/var/run/php5-fpm.sock;
        fastcgi_read_timeout 600;
       fastcgi_send_timeout 600;
       fastcgi_buffers 16 16k;
       fastcgi_buffer_size 32k;
        fastcgi_index index.php;
        include fastcgi_params;

    }

    location ~ /\.ht {
        deny all;
    }

}

我不知道我还能做些什么来摆脱这个错误。

---

第二次尝试

根据@Yaser 的回答更新了 Nginx 设置:

server {

    listen 80;
    server_name d.biossusa.com;
    root /home/forge/d.biossusa.com/distributor-application/laravel/public;

    index index.html index.htm index.php;

    charset utf-8;

    location / {
       set $cors '';
       if ($http_origin ~ '^http?://(www\.d.biossusa\.com)') {
               set $cors 'true';
       }

       if ($cors = 'true') {
               add_header 'Access-Control-Allow-Origin' "$http_origin" always;
               add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
       }
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    access_log off;
    error_log  /var/log/nginx/d.biossusa.com-error.log error;

    error_page 404 /index.php;

    location ~ \.php$ {

        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/var/run/php5-fpm.sock;
        fastcgi_read_timeout 600;
       fastcgi_send_timeout 600;
       fastcgi_buffers 16 16k;
       fastcgi_buffer_size 32k;
        fastcgi_index index.php;
        include fastcgi_params;

    }

    location ~ /\.ht {
        deny all;
    }

}

结果:

XMLHttpRequest 无法加载 http://d.biossusa.com/api/distributor?key=****。请求的资源上不存在“Access-Control-Allow-Origin” header 。因此不允许访问 Origin 'null'。响应具有 HTTP 状态代码 404。

---

第三次尝试

server {

    listen 80;
    server_name d.biossusa.com;
    root /home/forge/d.biossusa.com/distributor-application/laravel/public;

    index index.html index.htm index.php;

    charset utf-8;

    location / {

       try_files $uri $uri/ /index.php?$query_string;

       set $cors '';
       if ($http_origin ~ '^http?://(www\.d.biossusa\.com)') {
               set $cors 'true';
       }

       if ($cors = 'true') {
               add_header 'Access-Control-Allow-Origin' "$http_origin" always;
               add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
       }
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    access_log off;
    error_log  /var/log/nginx/d.biossusa.com-error.log error;

    error_page 404 /index.php;

    location ~ \.php$ {

        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/var/run/php5-fpm.sock;
        fastcgi_read_timeout 600;
       fastcgi_send_timeout 600;
       fastcgi_buffers 16 16k;
       fastcgi_buffer_size 32k;
        fastcgi_index index.php;
        include fastcgi_params;

    }

    location ~ /\.ht {
        deny all;
    }

}

结果

**XMLHttpRequest 无法加载 http://d.biossusa.com/api/distributor?key=****。请求的资源上不存在“Access-Control-Allow-Origin” header 。因此不允许访问 Origin 'null'。**

Answer 1

首先，您不能从 Angular 或通常在客户端分配 CORS 权限。

然后你不必为每个请求类型重复该行，只需将它放在你的配置文件的根目录中:

server {


    listen 8080;

    location / {

        if ($http_origin ~* (http:\/\/d\.biossusa\.com\S*)$) {
            set $cors "true";
        }

        if ($request_method = 'OPTIONS') {
            set $cors "${cors}options";
        }

        if ($request_method = 'GET') {
            set $cors "${cors}get";
        }
        if ($request_method = 'POST') {
            set $cors "${cors}post";
        }

        if ($cors = "trueget") {
            add_header 'Access-Control-Allow-Origin' "$http_origin";
            add_header 'Access-Control-Allow-Credentials' 'true';
        }

        if ($cors = "truepost") {
            add_header 'Access-Control-Allow-Origin' "$http_origin";
            add_header 'Access-Control-Allow-Credentials' 'true';
        }

        if ($cors = "trueoptions") {
            add_header 'Access-Control-Allow-Origin' "$http_origin";
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since';
            add_header 'Content-Length' 0;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            return 204;
        }
    }
}