每当我制作一个网络应用程序并遇到 CORS 问题时,我就会开始煮咖啡。搞砸了一段时间后,我设法让它工作,但这次不行,我需要帮助。
这是客户端代码:
$http({method: 'GET', url: 'http://localhost:3000/api/symbol/junk',
headers:{
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type, X-Requested-With',
'X-Random-Shit':'123123123'
}})
.success(function(d){ console.log( "yay" ); })
.error(function(d){ console.log( "nope" ); });
服务器端是带有 express 应用程序的常规 node.js。我有一个名为 cors 的扩展,它以这种方式与 express 一起使用:
var app = express();
app.configure(function(){
app.use(express.bodyParser());
app.use(app.router);
app.use(cors({origin:"*"}));
});
app.listen(3000);
app.get('/', function(req, res){
res.end("ok");
});
如果我这样做
curl -v -H "Origin: https://github.com" http://localhost:3000/
它返回:
* Adding handle: conn: 0x7ff991800000
* Adding handle: send: 0
* Adding handle: recv: 0
* Curl_addHandleToPipeline: length: 1
* - Conn 0 (0x7ff991800000) send_pipe: 1, recv_pipe: 0
* About to connect() to localhost port 3000 (#0)
* Trying ::1...
* Trying 127.0.0.1...
* Connected to localhost (127.0.0.1) port 3000 (#0)
> GET / HTTP/1.1
> User-Agent: curl/7.30.0
> Host: localhost:3000
> Accept: */*
> Origin: https://github.com
>
< HTTP/1.1 200 OK
< X-Powered-By: Express
< Date: Tue, 24 Dec 2013 03:23:40 GMT
< Connection: keep-alive
< Transfer-Encoding: chunked
<
* Connection #0 to host localhost left intact
ok
如果我运行客户端代码,它会引发此错误:
OPTIONS http://localhost:3000/api/symbol/junk No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access. angular.js:7889
XMLHttpRequest cannot load http://localhost:3000/api/symbol/junk. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access. localhost/:1
nope
检查 Chrome header :
Request URL:http://localhost:3000/api/symbol/junk
Request Method:OPTIONS
Status Code:200 OK
Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8,es;q=0.6,pt;q=0.4
Access-Control-Request-Headers:access-control-allow-origin, accept, access-control-allow-methods, access-control-allow-headers, x-random-shit
Access-Control-Request-Method:GET
Cache-Control:max-age=0
Connection:keep-alive
Host:localhost:3000
Origin:http://localhost:8000
Referer:http://localhost:8000/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
Response Headersview source
Allow:GET
Connection:keep-alive
Content-Length:3
Content-Type:text/html; charset=utf-8
Date:Tue, 24 Dec 2013 03:27:45 GMT
X-Powered-By:Express
检查请求 header ,我发现我的测试字符串 X-Random-Shit 出现在“Access-Control-Request-Headers”中,但它的值不存在。此外,在我的脑海中,我希望看到我正在设置的每个 header 都有一行,而不是一个 blob。
更新 ---
我将我的前端更改为 jQuery 而不是 Angular,并将我的后端制作成这样:
var app = express();
app.configure(function(){
app.use(express.bodyParser());
app.use(app.router);
});
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'OPTIONS,GET,POST,PUT,DELETE');
res.header("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With");
if ('OPTIONS' == req.method){
return res.send(200);
}
next();
});
app.get('/', function(req, res){
res.end("ok");
});
现在它适用于 GET 但不适用于其他任何东西(PUT、POST..)。
我会看看你们中是否有人提出了解决方案。与此同时,将 RESTful 概念抛到脑后,并使用 GET 进行所有操作。
最佳答案
我是 AngularJS 的新手,我遇到了这个 CORS 问题,我几乎失去了理智!幸运的是我找到了解决这个问题的方法。所以就这样......
我的问题是,当我使用 AngularJS $resource 发送 API 请求时,我收到此错误消息 XMLHttpRequest cannot load http://website.com。请求的资源上不存在“Access-Control-Allow-Origin” header 。因此不允许访问来源 'http://localhost'。
是的,我已经添加了 callback="JSON_CALLBACK"但它不起作用。
为了解决这个问题,我做了什么,而不是使用 GET 方法或求助于 $http.get,我使用了 JSONP。只需将 GET 方法替换为 JSONP,并将 api 响应格式也更改为 JSONP。
myApp.factory('myFactory', ['$resource', function($resource) {
return $resource( 'http://website.com/api/:apiMethod',
{ callback: "JSON_CALLBACK", format:'jsonp' },
{
method1: {
method: 'JSONP',
params: {
apiMethod: 'hello world'
}
},
method2: {
method: 'JSONP',
params: {
apiMethod: 'hey ho!'
}
}
} );
}]);
我希望有人觉得这有帮助。 :)
关于javascript - 访问控制允许来源和 Angular.js $http,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20754489/