允许Nginx上的CORS使用AngularJS HTTP GET
我的控制台中不断出现此错误: 无法加载XMLHttpRequest ****. 不 “Access Control Allow Origin”标头出现在请求的服务器上 资源。因此,不允许访问源“null” 我知道我有CORS问题。我正在努力修复它。请看下面我的步骤允许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>
第一次尝试 我已尝试在前端添加配置
<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;
}
}
}