[JQUERY] 왜 내 자바 스크립트 코드가 수신 않는 '없음'액세스 제어 - - 원산지를 허용 '헤더가 요청 된 자원에 존재하는 "우체부하지 않는 동안, 오류?
JQUERY왜 내 자바 스크립트 코드가 수신 않는 '없음'액세스 제어 - - 원산지를 허용 '헤더가 요청 된 자원에 존재하는 "우체부하지 않는 동안, 오류?
해결법
-
1.내가 그것을 이해하면 바로 당신은 당신의 페이지에보다 다른 도메인으로 XMLHttpRequest의를하고 있습니다. 그것은 일반적으로 보안상의 이유로 같은 기원에서 요청을 허용하는 브라우저 그래서 그것을 차단하고 있습니다. 크로스 도메인 요청을 수행 할 때 뭔가 다른 할 필요가있다. CORS를 사용하고 있음을 달성하는 방법에 대한 튜토리얼.
내가 그것을 이해하면 바로 당신은 당신의 페이지에보다 다른 도메인으로 XMLHttpRequest의를하고 있습니다. 그것은 일반적으로 보안상의 이유로 같은 기원에서 요청을 허용하는 브라우저 그래서 그것을 차단하고 있습니다. 크로스 도메인 요청을 수행 할 때 뭔가 다른 할 필요가있다. CORS를 사용하고 있음을 달성하는 방법에 대한 튜토리얼.
당신이 우편 배달부를 사용하는 경우 그들은이 정책에 의해 제한되지 않습니다. 크로스 원산지 XMLHttpRequest의에서 인용 :
-
2.그것은 당신이 PHP를 사용하는 경우 해결하기 위해 매우 간단합니다. 그냥 요청을 처리하여 PHP 페이지의 시작 부분에 다음 스크립트를 추가 :
그것은 당신이 PHP를 사용하는 경우 해결하기 위해 매우 간단합니다. 그냥 요청을 처리하여 PHP 페이지의 시작 부분에 다음 스크립트를 추가 :
<?php header('Access-Control-Allow-Origin: *'); ?>
당신이 사용하는 경우 다음 줄을 유엔 - 주석에 의해 노드 - 빨강 / settings.js 파일에 CORS 수 있도록해야 노드 - 빨간색 :
// The following property can be used to configure cross-origin resource sharing // in the HTTP nodes. // See https://github.com/troygoode/node-cors#configuration-options for // details on its contents. The following is a basic permissive set of options: httpNodeCors: { origin: "*", methods: "GET,PUT,POST,DELETE" },
당신은 질문 같은 플라스크를 사용하는 경우; 당신은 플라스크-고르를 설치하려면 먼저해야
$ pip install -U flask-cors
그런 다음 응용 프로그램에서 플라스크 고르를 포함한다.
from flask_cors import CORS
간단한 응용 프로그램은 다음과 같이 표시됩니다
from flask import Flask from flask_cors import CORS app = Flask(__name__) CORS(app) @app.route("/") def helloWorld(): return "Hello, cross-origin-world!"
자세한 내용은, 당신은 플라스크 문서를 확인할 수 있습니다.
-
3.때문에 $ 아약스 ({유형 : "POST"는 - 옵션을 호출 (.post $ - POST를 호출
때문에 $ 아약스 ({유형 : "POST"는 - 옵션을 호출 (.post $ - POST를 호출
모두 다르다. 우리가 그것을 호출 할 때 우체부 호출은 "POST"는 적절하지만, 그것은 "옵션"입니다.
C # 웹 서비스 용 - 웹 API
<의 system.webServer> 태그 아래에 web.config 파일에 다음 코드를 추가하십시오. 이것은 작동합니다 :
<httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> </customHeaders> </httpProtocol>
당신은 Ajax 호출에 어떤 실수를하고 있지 않은지 확인하십시오
$.ajax({ url: 'http://mysite.microsoft.sample.xyz.com/api/mycall', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, type: "POST", /* or type:"GET" or type:"PUT" */ dataType: "json", data: { }, success: function (result) { console.log(result); }, error: function () { console.log("error"); } });
참고 : 타사 웹 사이트에서 콘텐츠를 다운로드를 찾고 있다면 다음이 도움이되지 않습니다. 당신은 자바 스크립트를 다음 코드를 시도하지만 수 없습니다.
System.Net.WebClient wc = new System.Net.WebClient(); string str = wc.DownloadString("http://mysite.microsoft.sample.xyz.com/api/mycall");
-
4.이 첫 번째 가공하기 때문에, 귀하의 질문에서 // myApiUrl / 로그인 : API로 아래의 조사에서, 나는 HTTP 대신 http://example.com을 사용합니다.
이 첫 번째 가공하기 때문에, 귀하의 질문에서 // myApiUrl / 로그인 : API로 아래의 조사에서, 나는 HTTP 대신 http://example.com을 사용합니다.
//my-site.local : 나는 당신의 페이지는 HTTP에 있다고 가정 8088.
서로 다른 결과를 볼 이유는 우체부입니다 :
이 사이트 및 API가 같은 도메인이있는 경우 요청을 보내는 브라우저 '방식과 유사합니다 (브라우저는 또한 헤더 항목을 설정 리퍼러 = HTTP : //my-site.local : 8088, 그러나 나는 우체부에 표시되지 않습니다) . 원산지 헤더가 설정되어 있지 않은 경우, 일반적으로 서버는 기본적으로 이러한 요청을 할 수 있습니다.
이 우체부는 요청을 전송하는 방법 표준 방법입니다. 그러나 브라우저가 귀하의 사이트와 API가 서로 다른 도메인이 다음 CORS가 자동으로 발생하고 브라우저 때 다른 요청을 보냅니다 :
(헤더 참조자는 원점으로 동일한 값을 가진다). 그리고 지금 크롬의 콘솔 및 네트워크 탭에 당신은 볼 것이다 :
당신이 호스트가있을 때! = 원점이 CORS이며, 서버는 이러한 요청, 기본적으로 그것은 일반적으로 블록을 감지 할 때.
열고 HTML의 로컬 디렉토리의 내용, 그리고 요청을 보낼 때 원산지는 = null이 설정됩니다. 일반적으로, 모든 곳에서 HTML 사양이 불투명 기원, 당신은 원산지에 있음을 번역 할 수 있습니다 말한다 - 당신이 내 요청을 보낼 때 같은 상황은이 조각 이하 (그러나 여기에서 호스트 헤더가 설정되지 않은 모든)에서 같은
페치 ( 'http://example.com/api'{있어서 'POST'}); 크롬 콘솔에서 봐> 네트워크 탭
당신이 CORS 요청 단순한를 사용하지 않는 경우, 일반적으로 브라우저가 자동으로 또한 옵션은 기본 요청을 보내기 전에 요청 전송 - 자세한 내용은 여기에있다. 쇼 아래의 코드 조각이 :
가져 오기 ( 'http://example.com/api', { 방법 : 'POST', 헤더 : { '콘텐츠 유형': '응용 프로그램 / JSON'} }); 크롬 콘솔에서 봐 -> 'API'요청에 대한 네트워크 탭을 선택합니다. 이 옵션은 (서버가 POST 요청을 전송 할 수 없습니다) 요청입니다
당신은 CORS 요청을 허용하도록 서버의 구성을 변경할 수 있습니다.
/ "$ http_origin을"의 nginx과 "*"아파치 설정은 항상 매우 조심 - - 여기 (파일 nginx.conf)의 nginx에 CORS에 회전이 예 구성은이 모든 도메인에서 CORS 차단을 해제합니다.
위치 ~ ^ / 인덱스 \ .PHP (/ | $) { ... add_header '액세스 제어 - 허용 - 원산지' "$ http_origin"항상; add_header '액세스 제어 - 허용 - 자격 증명' '사실'항상; 경우 ($ REQUEST_METHOD = 옵션) { add_header '액세스 제어 - 허용 - 원산지' "$ http_origin"; #이 줄을 제거하지 마십시오 ( '경우'위의 외부와 배) add_header '액세스 제어 - 허용 - 자격 증명' ''는 true, add_header '액세스 제어 - 최대 에이지'1728000; 이십일에 대한 # 캐시 프리 플라이트 값 add_header은 '액세스 제어 - 허용 - 방법', 'GET, POST, OPTIONS'; add_header '액세스 제어 - 헤더 허용' '내 - 우선 - 헤더, 내 - 두 번째 헤더, 인증, 콘텐츠 형식, 수락, 원산지를'; add_header '콘텐츠 길이'0; add_header '콘텐츠 유형' '텍스트 / 일반 캐릭터 세트 = UTF-8'; 204 리턴; } }
여기 아파치 (htaccess로 파일)에 CORS 온 구성 예는
# ------------------------------------------------- ----------------------------- # | 크로스 도메인 Ajax 요청 | # ------------------------------------------------- ----------------------------- # 출처 간 Ajax 요청을 사용합니다. # http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity # http://enable-cors.org/ #
# 헤더는 Access-Control-Allow-Origin 설정 "*" # IfModule> 지시어도 # 헤더는 헤더가 액세스 제어 - 허용 - 원산지 세트 "*" # 헤더는 항상 액세스 - 제어 - 허용 - 자격 증명 설정 "사실" 액세스 제어 - 허용 - 원산지 "http://your-page.com:80" 헤더는 항상 설정 액세스 제어 - 허용 - 방법 "POST, GET, 옵션, DELETE, PUT" 헤더는 항상 설정 액세스 제어 - 헤더 허용 "내-최초 헤더, 내 - 두 번째 헤더, 인증, 콘텐츠 형식, CSRF 토큰" -
5.CORS 제한을 적용하면 브라우저가 서버에 의해 정의되고 구현 된 보안 기능입니다.
CORS 제한을 적용하면 브라우저가 서버에 의해 정의되고 구현 된 보안 기능입니다.
그러나, 우체부 도구는 서버의 CORS 정책에 대해 걱정하지 않습니다.
CORS 오류가 우체부의 브라우저에 나타납니다,하지만 이유입니다.
-
6.다른 사용의 경우 동일한 오류가 발생했습니다.
다른 사용의 경우 동일한 오류가 발생했습니다.
사용 사례 : 크롬에서 각도에서 봄 REST 엔드 포인트를 호출하려고 할 때.
해결 방법 : @CrossOrigin ( "*") 각각의 컨트롤러 클래스의 상단에 주석을 추가합니다.
-
7.당신이 자바 스크립트 API 또는 XMLHttpRequest 객체를 가져와 내용을 가져 오는 제한 있음을 우회하려는 경우, 당신은 *에 헤더 액세스 제어 - 허용 - 원산지를 설정하도록 프록시 서버를 사용할 수 있습니다.
당신이 자바 스크립트 API 또는 XMLHttpRequest 객체를 가져와 내용을 가져 오는 제한 있음을 우회하려는 경우, 당신은 *에 헤더 액세스 제어 - 허용 - 원산지를 설정하도록 프록시 서버를 사용할 수 있습니다.
const express = require('express'); const request = require('request'); const app = express(); app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); next(); }); app.get('/fetch', (req, res) => { request( { url: req.query.url }, (error, response, body) => { if (error || response.statusCode !== 200) { return res.status(500).send('error'); } res.send(body); } ) }); const PORT = process.env.PORT || 3000; app.listen(PORT, () => console.log(`listening on ${PORT}`));
위는 프록시 서버의 역할을 할 수있는 샘플 코드 (JS 필요 노드)입니다. 예를 들면 : 나는 CORS 오류가 발생하지만, 요청이 프록시 서버를 통해 전송되기 때문에 지금은 포트 3000에서 로컬 호스팅 일반적으로 https://www.google.com을 인출 할 경우, 프록시 서버는 액세스 - 조절 - 추가 응답의 헤더 원점 허용하고 문제가있을 실 거예요.
HTTP에 GET 요청을 보내기 : // localhost를 : 3000 / 당신이 가져하려는 대신에 직접 URL로 요청을 보내는 여기에 URL = 귀하의 URL 가져 오기?을.
https://www.google.com : 귀하의 URL은 여기에 당신이 예를 가져올하고자하는 URL을 의미합니다
-
8.만 .NET 핵심 웹 API 프로젝트를 위해, 다음과 같은 변경 사항을 추가합니다
만 .NET 핵심 웹 API 프로젝트를 위해, 다음과 같은 변경 사항을 추가합니다
services.AddCors(allowsites=>{allowsites.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin()); });
app.UseCors(options => options.AllowAnyOrigin());
[EnableCors("AllowOrigin")]
-
9.당신이 당신의 중간 계층으로 .NET을 사용하는 경우, 명확하게 경로 속성을 확인, 예를 들어,
당신이 당신의 중간 계층으로 .NET을 사용하는 경우, 명확하게 경로 속성을 확인, 예를 들어,
이 같은 때 나는 문제가 있었다
[Route("something/{somethingLong: long}")] //Space.
이하여 고정,
[Route("something/{somethingLong:long}")] //No space
from https://stackoverflow.com/questions/20035101/why-does-my-javascript-code-receive-a-no-access-control-allow-origin-header-i by cc-by-sa and MIT license
'JQUERY' 카테고리의 다른 글
[JQUERY] 어떻게 비동기 적으로 파일을 업로드 할 수 있습니까? (0) | 2020.09.20 |
---|---|
[JQUERY] 내가 jQuery를 배경이있는 경우 "AngularJS와의 생각"? [닫은] (0) | 2020.09.20 |
[JQUERY] 왜 jQuery를 또는에서 getElementById 같은 DOM 방법은없는 요소를 찾을 수 있습니까? (0) | 2020.09.20 |
[JQUERY] 동적으로 생성 된 요소에 바인딩 이벤트? (0) | 2020.09.20 |
[JQUERY] 어떻게 비동기 호출의 응답을 반환합니까? (0) | 2020.09.20 |