处理无“访问控制允许来源” - 客户端问题

Question

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

我的网站客户端代码部署在服务器中，该网站调用部署在其他不同服务器中的 Web 服务。 （请注意：我没有此网络服务代码访问权限）。

我的 AJAX 代码来检索数据：

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

通过 AJAX 访问此网络服务时，我收到：

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 服务的响应（在我的 Web 服务的“网络”选项卡 ->“响应”选项卡下）。但是，正在检索上述错误。

在查看之前的许多帖子时，我发现通过将响应标头设置为：

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

将解决此问题。

但是，我无权更改我的网络服务代码以添加响应标头。我必须在网站上解决这个问题。

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

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', '*') 对我没有帮助。

谁能指导我。

Answer 1

这是因为跨域限制。

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

但是，由于您无权访问该 Web 服务，因此您可以使用 jQuery ajax，如 answer 中所示

$.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");
}

或者，使用解释的备用函数here

要使用jsonp，网络服务必须支持回调参数，查看他们的文档。