不处理“Access-Control-Allow-Origin” – 客户端问题

这个问题对许多新手来说可能不是一个新问题。 我是其中之一，我必须在客户端处理这个问题。 所以，请不要将此问题标记为重复。

我有我的网站客户端代码部署在服务器，这个网站调用部署在其他一些不同的服务器的web服务。 （请注意：我没有这个webservice代码访问）。

我的AJAX代码来检索数据： 

$.ajax({ type: 'GET', url: 'http://webservice_url', success: function (data) { //success }, failure: function(error){ //error } });

在通过AJAX访问此Web服务时，我收到： 

 XMLHttpRequest cannot load http://webservice_url. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

浏览器控制台日志

  • 我可以在浏览器控制台（在我的web服务的“networking”选项卡 – >“响应”选项卡下）成功查看我的web服务的响应。 但是，检索上述错误。

在回顾许多以前的post，我发现通过设置响应标题为： 

 response.addHeader("Access-Control-Allow-Origin", "*");

将解决这个问题。

但是， 我没有访问权限来改变我的web服务代码，添加响应头 。 我必须在网站上解决这个问题。

我使用ExpressJS和Node开发了这个网站。 我的应用程序代码是 

 var http = require('http'); var routes = require('./routes'); var express = require('express'); var path = require('path'); var app = express(); app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); app.use(express.cookieParser('secret code')); app.use(express.logger('dev')); app.use(express.favicon()); app.use(express.methodOverride()); app.use(express.session()); app.use(express.bodyParser()); app.use(app.router); app.use(express.static(path.join(__dirname, 'public'))); // Add headers app.use(function (req, res, next) { // Website you wish to allow to connect res.setHeader('Access-Control-Allow-Origin', '*'); // Request methods you wish to allow res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); // Request headers you wish to allow res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type'); // Pass to next layer of middleware next(); }); app.get('/', routes.index); http.createServer(app).listen(3000, function(){ console.log('Express server started successfully'); });

添加res.setHeader('Access-Control-Allow-Origin', '*')没有帮助我。

任何人都可以指导我

这是因为跨域限制。

您在客户端代码中添加了Access-Control-Allow-Headers ，这是错误的。 它应该添加在服务器端的代码，即您正在尝试访问的Web服务。

但是，由于您无法访问该Web服务，因此可以使用此答案中所示的jQuery ajax 

 $.ajax({ url:"testserver.php", dataType: 'jsonp', // Notice! JSONP <-- P (lowercase) jsonp: 'callback', jsonpCallback: 'jsonpCallback', success:function(json){ // do stuff with json (in this case an array) alert("Success"); }, error:function(){ alert("Error"); }, }); function jsonpCallback(data){ alert("jsonpCallback"); }

或者，使用这里解释的替代function

要使用jsonp ，Web服务必须支持callback参数，检查他们的文档。

Interesting Posts