XMLHttpRequest cannot load http://localhost:8080/api/test. Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.
Я читал о кросс-доменных ajax-запросах и понимаю, что в основе лежит проблема безопасности. В моем случае 2 сервера работают локально, и я хотел бы включить междоменные запросы во время тестирования.
localhost:8080 - Google Appengine dev server
localhost:3000 - Node.js server
Я отправляю ajax-запрос на localhost:8080 - сервер GAE
, в то время как моя страница загружается с сервера node. Какой способ самый простой и безопасный (не хочу запускать хром с опцией disable-web-security
). Если мне нужно изменить 'Content-Type'
, должен ли я сделать это на сервере node? Как?
Поскольку они работают на разных портах, они являются разными JavaScript origin
. Не имеет значения, что они находятся на одной машине/имени хоста.
Вам нужно включить CORS на сервере (localhost:8080). Посмотрите этот сайт: http://enable-cors.org/
Все, что вам нужно сделать, это добавить HTTP-заголовок на сервер:
Access-Control-Allow-Origin: http://localhost:3000
Или, для простоты:
Access-Control-Allow-Origin: *
Если вам нужно быстро обойти в Chrome для ajax-запросов, этот плагин Chrome автоматически позволяет вам получить доступ к любой сайт из любого источника, путем добавления соответствующего заголовка ответа
Расширение Chrome Позволяет-Контроля-Позволяет Происхождения: *
Чтобы решить эту проблему, необходимо включить CORS
установите его в заголовках ответа, например
var http = require('http');
http.createServer(function (request, response) {
response.writeHead(200, {
'Content-Type': 'text/plain',
'Access-Control-Allow-Origin' : '*',
'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE'
});
response.end('Hello World\n');
}).listen(3000);
используйте промежуточное ПО CORS, например
var allowCrossDomain = function(req, res, next) {
res.header('Access-Control-Allow-Origin', "*");
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
}
и применяйте через
app.configure(function() {
app.use(allowCrossDomain);
//some other code
});
Вот две ссылки
Я принимаю ответ @Rocket hazmat'а, поскольку он привел меня к решению. Действительно, на сервере GAE мне нужно было установить заголовок. Мне нужно было установить следующее
"Access-Control-Allow-Origin" -> "*"
"Access-Control-Allow-Headers" -> "Origin, X-Requested-With, Content-Type, Accept"
установка только "Access-Control-Allow-Origin"
дала ошибку
Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers.
Также, если необходимо отправить токен аутентификации, добавьте вот это
"Access-Control-Allow-Credentials" -> "true"
Также на клиенте установите withCredentials
.
это приводит к тому, что на сервер отправляется 2 запроса, один с OPTIONS
. Auth cookie не отправляется вместе с ним, поэтому необходимо обработать его вне auth.
Если вы используете Express, вы можете использовать CORS промежуточного следующим образом:
var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())
Я столкнулся с проблемой при вызове крест происхождения ресурсов с помощью AJAX из хрома.
Я использовал узел JS и локальный HTTP-сервер, чтобы развернуть приложение Мой узел JS.
Я получаю сообщение об ошибке, когда я открыть крест происхождения ресурсов
Я нашел одно решение о том ,
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
$.помощью метода getjson();
$.getJSON("http://localhost:3000/users", function (data) {
alert("*******Success*********");
var response=JSON.stringify(data);
alert("success="+response);
document.getElementById("employeeDetails").value=response;
});
В router.js просто добавить код перед вызовом GET и POST методов. Для меня это работает без ошибок.
//Importing modules @Brahmmeswar
const express = require('express');
const router = express.Router();
const Contact = require('../models/contacts');
router.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
Если вы получили 403 после этого уменьшите фильтров WEB.XML котяра конфиг следующий:
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
<init-param>
<param-name>cors.allowed.origins</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.methods</param-name>
<param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.headers</param-name>
<param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
</init-param>
<init-param>
<param-name>cors.exposed.headers</param-name>
<param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
</init-param>
</filter>
Добавьте это в ваш NodeJS сервер ниже импорта:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
Я, наконец, получил ответ на Апач Tomcat8
Вы должны отредактировать файл web.xml котяра.
вероятнее всего, он будет в папке webapps,
sudo gedit /opt/tomcat/webapps/your_directory/WEB-INF/web.xml
найти его и отредактировать его
<web-app>
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
<init-param>
<param-name>cors.allowed.origins</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.methods</param-name>
<param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.headers</param-name>
<param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
</init-param>
<init-param>
<param-name>cors.exposed.headers</param-name>
<param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
</init-param>
<init-param>
<param-name>cors.support.credentials</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>cors.preflight.maxage</param-name>
<param-value>10</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
Это позволит получить доступ-контроля-разрешить-происхождение всех узлов. Если вам нужно изменить его со всех узлов, чтобы только ваш хозяин вы можете редактировать
<param-name>cors.allowed.origins</param-name>
<param-value>http://localhost:3000</param-value>
выше код из * вашей http://your_public_IP или http://www.example.com
вы можете обратиться сюда котяра фильтра документации
Спасибо
Привет это способ решить проблему CORS в узел, просто добавьте эти строки на сервере с "АПИ" на сторону в Node.js(или какой нибудь свой файл-сервер), перед этим убедитесь, что установите и"коров"и
const express = require('express');
const app = express();
app.use(express.json());
var cors = require('cors');
app.use(cors());
используйте тип данных: 'JSONP в', работает для меня.
async function get_ajax_data(){
var _reprojected_lat_lng = await $.ajax({
type: 'GET',
dataType: 'jsonp',
data: {},
url: _reprojection_url,
error: function (jqXHR, textStatus, errorThrown) {
console.log(jqXHR)
},
success: function (data) {
console.log(data);
// note: data is already json type, you just specify dataType: jsonp
return data;
}
});
} // function
Для PHP, использовать это, чтобы установить заголовки.
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
Если вы're в Гугл Хром, попробуйте установить эту надстройку: