允许Nginx上的CORS使用AngularJS HTTP GET

允许Nginx上的CORS使用AngularJS HTTP GET,angularjs,http,nginx,cors,Angularjs,Http,Nginx,Cors,我的控制台中不断出现此错误: 无法加载XMLHttpRequest ****. 不 “Access Control Allow Origin”标头出现在请求的服务器上 资源。因此,不允许访问源“null” 我知道我有CORS问题。我正在努力修复它。请看下面我的步骤 第一次尝试 我已尝试在前端添加配置 <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>

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

无法加载XMLHttpRequest ****. 不 “Access Control Allow Origin”标头出现在请求的服务器上 资源。因此,不允许访问源“null”

我知道我有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>
我不知道我还能做些什么来摆脱这个错误


第二次尝试 基于@Yaser-Answer更新的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”标头。因此,不允许访问源“null”。响应的HTTP状态代码为404。


第三次尝试 结果


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

首先,您不能从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;
        }
    }
}

我已尝试将您的建议添加到我的nginx配置中。重新启动我的服务器。刷新我的页面。我现在在控制台上发现了这个新错误<代码>获取http://d.biossusa.com/api/distributor?key=bunlongheng net::ERR_CONNECTION_densed我相信你已经关闭了。请记住,我以前在我的nginx设置中有这个设置:location/{try_files$uri$uri//index.php?$query_string;}现在我已经添加了你的,我该如何处理我的旧设置?你不再需要这些了,origin指向的是一个域,而不是整个url@ihue,老实说,也没有看到此设置的连接被拒绝。关键是你不能在CORS中使用whildcard
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;
    }

}
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;
        }
    }
}