출발지가 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
내 페이지가 노드 서버에서 로드되는 동안.한가(Don with ( Chrome ) 。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: *
할 때 cookie를 사용하는 를 사용하지 withCredentials = true
credential 요구에 응답할 때 서버는 도메인을 지정해야 하며 와일드카드를 사용할 수 없습니다.
Chrome에서 Ajax 요청을 신속하게 처리해야 하는 경우 이 Chrome 플러그인은 적절한 응답 헤더를 추가하여 모든 소스에서 모든 사이트에 자동으로 액세스할 수 있도록 합니다.
이 문제를 해결하려면 CORS를 활성화해야 합니다.
앱이 simple node.dell로 작성되어 있는지 확인합니다.
다음과 같이 응답 헤더에 설정합니다.
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
});
여기 2개의 참조 링크가 있습니다.
@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 。
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();
});
express를 사용하는 경우 다음과 같이 코르스 미들웨어를 사용할 수 있습니다.
var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())
Chrome의 Ajax를 사용하여 크로스 오리진 리소스를 호출하는 동안 문제가 발생했습니다.
노드 js와 로컬 http 서버를 사용하여 노드 js 앱을 배포했습니다.
크로스 오리진 리소스에 액세스할 때 오류 응답을 받았습니다.
나는 그것에 대한 해결책을 하나 찾았다.
1) 아래 코드를 app.js 파일에 추가하였습니다.
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
2) cross origin resources라는 이름의 html 페이지에서$.getJSON();
$.getJSON("http://localhost:3000/users", function (data) {
alert("*******Success*********");
var response=JSON.stringify(data);
alert("success="+response);
document.getElementById("employeeDetails").value=response;
});
다음 Import에서 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();
});
그 후 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>
솔루션을 찾는 사람이 있는 경우 express를 사용하는 것이 빠른 해결책입니다.
const express = require('express')
const cors = require('cors')
const app = express()
1) npm을 사용하여 Cors를 설치합니다.npm install cors --save
2) Import [ ]const cors = require('cors')
3) 미들웨어로 사용app.use(cors())
자세한 내용은 코르사의 사용법을 참조하십시오.그게 다야, 잘 됐으면 좋겠는데.
드디어 Apache Tomcat8에 대한 답을 얻었다.
Tomcat 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>
그러면 모든 호스트에서 Access-Control-Allow-Origin이 허용됩니다.모든 호스트에서 호스트만으로 변경해야 하는 경우
<param-name>cors.allowed.origins</param-name>
<param-value>http://localhost:3000</param-value>
위의 코드를 *에서 http://your_public_IP 또는 http://www.example.com로 전송합니다.
감사합니다.
router.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "*");
res.header("Access-Control-Allow-Headers", "*");
next();});
프런트 엔드에서 콜하고 있는 루트에 이것을 추가합니다.예를 들어 http://localhost:3000/users/register를 호출할 경우 이 루트가 배치되어 있는 백엔드 .js 파일에 이 코드 fragment를 추가해야 합니다.
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");
안녕하세요, 이것은 노드에서 CORS 문제를 해결하는 방법입니다.Node.js(또는 서버 파일)의 서버 "api" 쪽에 이러한 행을 추가하면 "cors"를 설치할 수 있습니다.
const express = require('express');
const app = express();
app.use(express.json());
var cors = require('cors');
app.use(cors());
서버가 다음과 같은 경우server=express()
덧붙이기만 하면 된다server.use(cors())
다음 행으로 이동합니다.예:
server.js
const express = require('express')
const cors = require('cors')
server=express()
server.use(cors())
server.get('/',(req,res)=>{
res.send({"name":"aakash","name2":"aakash4dev"})
})
server.listen(3000)
index.html
<script>
fetch('http://localhost:3000/')
.then(res=> res.json())
.then(data => console.log(data))
</script>
dataType: '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
express를 사용하는 경우,
var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())
사용하시는 경우app.use(express.json());
JSON payload를 사용하여 착신 요구를 해석하는 서버 파일의 코드 행으로, 본문 파서에 근거하고 있습니다.사용 후 사용하는 것에 주의해 주세요. app.use(cors())
코드 라인그렇지 않으면 보안 문제가 발생할 수 있습니다.코르스
Google Chrome을 사용하는 경우 다음 추가 기능을 설치해 보십시오.
언급URL : https://stackoverflow.com/questions/18642828/origin-origin-is-not-allowed-by-access-control-allow-origin
'programing' 카테고리의 다른 글
조건부로 Select Input 값 변경 방지 (0) | 2022.09.26 |
---|---|
Java 키스토어의 PEM 포맷으로의 변환 (0) | 2022.09.26 |
MariaDB 복제가 오류 없이 중단됨 (0) | 2022.09.26 |
ipython 노트북에서 셀 실행 시간을 측정하는 간단한 방법 (0) | 2022.09.26 |
postgresql-server-dev-X를 설치해야 합니다.서버측 확장을 구축하기 위한 Y 또는 클라이언트측 애플리케이션을 구축하기 위한 libpq-dev (0) | 2022.09.26 |