Question

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

我将我的网站客户端代码部署在服务器中，并且该网站调用部署在其他不同服务器中的Web服务。（请注意：我没有此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.

浏览器控制台日志：

我可以在浏览器控制台中成功查看我的网络服务响应（在我的网络服务的“网络”标签 - ＆gt;“响应”标签下）。但是，检索上述错误。

在回顾过去的很多帖子时，我发现将响应标题设置为：

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

将解决此问题。

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

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

任何人都可以指导我。

Answer 1

这是因为跨域限制。

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

但是，由于您无权访问该网络服务，因此您可以使用此answer

中显示的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");
}

或者，使用替代功能解释here

要使用jsonp，Web服务必须支持回调参数，请查看其文档。

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

1 个答案: