ajax - 处理 no 'Access-Control-Allow-Origin' - 客户端问题

Question

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

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

我用于检索数据的 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.

浏览器控制台日志:

• 我可以在浏览器控制台中成功查看网络服务的响应(在网络服务的“网络”选项卡 ->“响应”选项卡下)。但是，检索上述错误。

在回顾许多以前的帖子时，我发现通过将响应 header 设置为:

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

将解决此问题。

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

我使用 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 服务，因此您可以使用 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，Web 服务必须支持回调参数，请查看其文档。