'Access-Control-Allow-Origin' with jQuery getJSON

Question

我知道关于 SO 不乏CORS问题，但在这种情况下没有一个可以帮助我：

我想使用以下jQuery代码段从本地主机后端获取JSON数据：

var SERVER_URL = "http://127.0.0.1:8080";
$.getJSON(SERVER_URL,function(result){
console.log("result is", result);
$.each(result, function(i, field){
$("div").append(field + " ");
});
});

该代码段被加载到index.html使用这个简单的节点静态文件服务器在http://localhost:3000/index.html上运行：

var connect = require('connect');
var serveStatic = require('serve-static');
connect().use(serveStatic(__dirname)).listen(3000, function(){
console.log('Server running on 3000...');
});

但是在Chrome控制台中，我得到：

Failed to load http://127.0.0.1:8080/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

我在火狐中遇到了同样的问题。

我该如何解决这个问题？

Answer 1

您应该在服务器上设置标头Access-Control-Allow-Origin: *。 您应该做的方法是依赖于您的服务器端语言。

例如：菲律宾比索

<?php
header('Access-Control-Allow-Origin: *'); 
?>

Answer 2

安装cors软件包

npm install cors

并像这样使用

var cors = require('cors');
const corsOptions = {
methods: "GET,HEAD,OPTIONS,PUT,PATCH,POST,DELETE",  // use to manage api cross origin error
origin: '*'
}

或

var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())
app.get('/products/:id', function (req, res, next) {
res.json({msg: 'This is CORS-enabled for all origins!'})
})
app.listen(80, function () {
console.log('CORS-enabled web server listening on port 80')
})

运行此命令，它将打开新的 chrome 并在此处运行您的代码

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security