유래 Access-Control-Allow-Origin은 허용되지 않습니다.
XMLHttpRequest cannot load http://localhost:8080/api/test. Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.
교차 도메인 아약스 요청에 대해 읽고 기본 보안 문제를 이해합니다. 필자의 경우 2 대의 서버가 로컬에서 실행 중이며 테스트 중에 도메인 간 요청을 활성화하고 싶습니다.
localhost:8080 - Google Appengine dev server
localhost:3000 - Node.js server
localhost:8080 - GAE server내 페이지가 노드 서버에서로드되는 동안 아약스 요청을 발행하고 있습니다. 가장 쉽고 안전한 방법은 무엇입니까 ( disable-web-security옵션으로 크롬을 시작하고 싶지는 않음 ). 변경 'Content-Type'해야하는 경우 노드 서버에서 변경 해야합니까? 어떻게?
그것들은 다른 포트에서 실행되기 때문에 다른 JavaScript origin입니다. 이들이 동일한 컴퓨터 / 호스트 이름에 있는지는 중요하지 않습니다.
서버에서 CORS를 활성화해야합니다 (localhost : 8080). 이 사이트를 확인하십시오 : http://enable-cors.org/
서버에 HTTP 헤더를 추가하기 만하면됩니다.
Access-Control-Allow-Origin: http://localhost:3000
또는 간단하게하기 위해 :
Access-Control-Allow-Origin: *
Chrome에서 Ajax 요청을 신속하게 해결해야하는 경우이 Chrome 플러그인을 사용하면 적절한 응답 헤더를 추가하여 모든 소스에서 모든 사이트에 자동으로 액세스 할 수 있습니다
이 문제를 해결하려면 CORS를 활성화해야합니다
간단한 node.js로 앱을 만든 경우
응답 헤더에 설정하십시오.
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);
앱이 Express 프레임 워크로 생성 된 경우
같은 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. 인증 쿠키는 함께 전송되지 않으므로 외부 인증을 처리해야합니다.
크롬에서 아약스를 사용하여 교차 출처 리소스를 호출하는 동안 문제가 발생했습니다.
노드 js 및 로컬 http 서버를 사용하여 노드 js 앱을 배포했습니다.
교차 출처 리소스에 액세스 할 때 오류 응답이 발생했습니다.
나는 그것에 대한 하나의 해결책을 찾았다.
1) app.js 파일에 아래 코드를 추가했습니다.
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
2) 내 HTML 페이지에서 cross origin resource를 사용하여 $.getJSON();
$.getJSON("http://localhost:3000/users", function (data) {
alert("*******Success*********");
var response=JSON.stringify(data);
alert("success="+response);
document.getElementById("employeeDetails").value=response;
});
express를 사용하는 경우 다음과 같이 cors 미들웨어를 사용할 수 있습니다.
var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())
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 tomcat 구성의 필터를 다음과 같이 줄이십시오.
<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에 대한 답을 마침내 얻었습니다.
You have to edit the tomcat web.xml file.
probabily it will be inside webapps folder,
sudo gedit /opt/tomcat/webapps/your_directory/WEB-INF/web.xml
find it and edit it
<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>
This will allow Access-Control-Allow-Origin all hosts. If you need to change it from all hosts to only your host you can edit the
<param-name>cors.allowed.origins</param-name>
<param-value>http://localhost:3000</param-value>
above code from * to your http://your_public_IP or http://www.example.com
you can refer here Tomcat filter documentation
Thanks
use dataType: 'jsonp', works for me.
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
For PHP, use this to set headers.
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");
Hi This is the way to solve CORS problem in node Just add these lines on server "api" side in Node.js(or what ever your server File), befor that make sure to install "cors"
const express = require('express');
const app = express();
app.use(express.json());
var cors = require('cors');
app.use(cors());
If you're in Google Chrome, try installing this add-on:
'development' 카테고리의 다른 글
| jQuery로 텍스트 색상을 어떻게 변경할 수 있습니까? (0) | 2020.06.14 |
|---|---|
| pandoc을 사용하여 Markdown에서 PDF로 변환 할 때 여백 크기 설정 (0) | 2020.06.14 |
| 자바 재귀 피보나치 시퀀스 (0) | 2020.06.14 |
| 다른 모듈이 필요한 Node.js 모듈을 단위 테스트하는 방법과 전역 요구 기능을 조롱하는 방법은 무엇입니까? (0) | 2020.06.14 |
| Java 배열은 처음에 요소를 추가하는 방법 (0) | 2020.06.14 |