나는'm 올 정도는 일부 데이터 REST API HP Alm. 그것은 꽤 잘 작동과 작은 스크립트 컬-내 데이터입니다.
지금 하는 자바스크립트로 가져오고 ES6(더 많거나 적은)보다 더 큰 문제입니다. 나는 오류 메시지가 표시:
Fetch API 로드할 수 없
. 응답전 요구하지 않't pass access control 체크:없음'액세스 제어할 수 있 원산지'헤더가 에 존재하는 요청된 자원이다. 원산지'http://127.0.0.1:3000' 이 따라서 허용되지 않습 액세스입니다. 응답을 했다는 HTTP status code501. 는 경우에는 불투명한 응답이 제공의 필요에,설정한 요청이's 드 'no-cors'를 가져올 자원 CORS 사용할 수 없습니다.
다는 것을 저는 이해하기 때문에 나올 정도는 데이터에서 내 localhost 와 솔루션을 사용해야 CORS. 지금 나는 생각으로는,그러나 어떻게든 그것을 무시 내가 쓰는 헤더에서는 문제는 다른 무언가가?
그래서,구현 문제입니까? 나는 그 일을 잘못입니까? 수't 확인 서버 로그에 있습니다. 나는'm 비트가 정말 여기 붙어.
function performSignIn() {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json');
headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
headers.append('Access-Control-Allow-Credentials', 'true');
headers.append('GET', 'POST', 'OPTIONS');
headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password));
fetch(sign_in, {
//mode: 'no-cors',
credentials: 'include',
method: 'POST',
headers: headers
})
.then(response => response.json())
.then(json => console.log(json))
.catch(error => console.log('Authorization failed : ' + error.message));
}
내가 사용하고 Chrome. 도를 사용하는 크롬 CORS 플러그인을 하지만 나는 다른 오류 메시지:
의 값'액세스 제어할 수 있 원산지'헤더에서 응답 지해야하는 와일드카드'*'면 요청이's credentials 드 'include'. 원산지'http://127.0.0.1:3000' 다;따라서 허용되지 않습 액세스입니다. 자격 모드로의 요청에 의해 시작 XMLHttpRequest 에 의해 제어됩 withCredentials 특성이 있습니다.
를 사용하는 방법 CORS 프록시의 주위에 얻"권한 없음을 원산지 헤더에"문 제어하지 않는 경우는 서버 프론트 엔드 JavaScript 코드가 요청을 전송,그리고 문제에서 응답하는 서버의 부족에 필요한 접근을 원산지`헤더를 얻을 수 있습 것을 작업하여 요청을 통해 CORS 기록합니다. 는 방법을 보여주는 작품이,첫 번째 여기에 몇 가지는 코드를 사용하지 않 CORS proxy:
const url = "https://example.com"; // site that doesn’t send Access-Control-*
fetch(url)
.then(response => response.text())
.then(contents => console.log(contents))
.catch(() => console.log("Can’t access " + url + " response. Blocked by browser?"))
이유는잡을 차단할 수가 있다,브라우저에 방지하는 코드에서 액세스 응답이 제공에서 다시
https://example.com. 그 이유는 브라우저는 응답이 부족하는
액세스 제어할 수 있 원산지`응답 헤더가 있습니다.
이제 여기에 정확히 같은 예를 들어만으로 CORS 프록시에서 추가된:
const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = "https://example.com"; // site that doesn’t send Access-Control-*
fetch(proxyurl + url) // https://cors-anywhere.herokuapp.com/https://example.com
.then(response => response.text())
.then(contents => console.log(contents))
.catch(() => console.log("Can’t access " + url + " response. Blocked by browser?"))
참고:https
https://example.com
. https://example.com
. 액세스 제어할 수 있 원산지
헤더를 응답입니다. git clone https://github.com/Rob--W/cors-anywhere.git
cd cors-anywhere/
npm install
heroku create
git push heroku master
https://cors-anywhere.herokuapp.com
앞으로 대신 URL 에 대한 자신의 인스턴스;예를 들어,https://cryptic-headland-94862.herokuapp.com/https://example.com.
그래서 만약 당신이 갈 때 사용하려고하는 https옵션을 요청—기 때문에 이 경우,프록시에도 다시 보내는
액세스 제어-Allow-글과
액세스 제어록할 수 있는 방법`헤더를 만드는 데 필요한 실행 전 성공적이다. 을 방지하는 방법 CORS preflight
코드는 질문에서 트리거 CORS preflight—기 때문 보내는인증
헤더가 있습니다.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests
도 없는Content-Type:응용 프로그램/json
헤더도 트리거의 과다가있다.
"무엇전"을 의미:전에 브라우저를 시도하는POST
코드에서 이 질문에 그것은 먼저 보내기옵션을 요청하면 서버를 결정하는 경우 서버는 선택을 받는 십자가 원산지
POST을 포함하는
인증과
Content-Type:응용 프로그램/json`헤더가 있습니다.
그것은 꽤 잘 작동과 작은 스크립트 컬-내 데이터입니다. 을 제대로 테스트하는
컬
,당신을 에뮬레이션 프리플라이트옵션을
요청을 브라우저에 보내는:
curl -i -X OPTIONS -H "Origin: http://127.0.0.1:3000" \
-H 'Access-Control-Request-Method: POST' \
-H 'Access-Control-Request-Headers: Content-Type, Authorization' \
"https://the.sign_in.url"
...가진https://the.sign_in.url
에 의해 대체 어떤 실제sign_in
URL 입니다.
응답 브라우저를 볼 필요가에서는옵션을
요청 헤더를 포함해야 합니다 다음과 같다:
Access-Control-Allow-Origin: http://127.0.0.1:3000
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type, Authorization
응답하지 않는 사람들을 포함한 헤더,다음 브라우저가지 않도를 보내려고 하는
포스트요청을 합니다. 또한,HTTP 상태 코드로 응답해야 합 2xx—일반적으로 200 또는 204. 는 경우 그것은 다른 상태코드,브라우저는 것이지 바로 거기에 있습니다. 서버는 질문에 응답합
옵션을 요청으로 501 상태 코드를 분명히 그것은 노력을 나타내지 않을 구현하에 대한 지원 옵션니다. 다른 서버가 일반적으로 응답 405"Method not allowed"상태 코드를 이 경우. 그래서 당신은 없을 것을 만들 수 있
POST직접 요청하는 서버에서 프론트 엔드 JavaScript 코드는 경우 서버에 응답하는
옵션을요청 405 또는 501 또는 다른 것보다 200 또는 204 는 경우 또는 반응하지 않는 사람들과 필요한대로 응답 헤더로 보낸다. 하는 것을 방지하기 위해 트리거 프리플라이트 사건에 대한 질문에 될 것이다: *서버인 경우가 필요하지 않는
인증요청 헤더하지만,대신(예를 들어)의 인증 데이터에 포함된 본문의
포스트요청 또는 쿼리를 매개 변수 *서버인 경우 필요로 하지 않았
POST몸을
Content-Type:응용 프로그램/json미디어 유형을 대신 받아들이
POST몸
으로 응용 프로그램/x-www-form-urlencoded매개 변수와 함께
라는 이름 json`(또는)그 값은 JSON data *하는 방법**수정"액세스 제어할 수 있 원산지 헤더에 있지 않아야 합 와일드카드"문**
나는 다른 오류 메시지:
의 값'액세스 제어할 수 있 원산지'헤더에서 응답 지해야하는 와일드카드''면 요청이's credentials 드 'include'. 원산지'http://127.0.0.1:3000' 다;따라서 허용되지 않습 액세스입니다. 자격 모드로의 요청에 의해 시작 XMLHttpRequest 에 의해 제어됩 withCredentials 특성이 있습니다. 에 대한 요청을 포함하는 자격 증명,브라우저 못하게 프론트 엔드 JavaScript 코드에 액세스하면 응답의 접근을 원산지
응답 헤더가
. 대신 값을 경우에 정확히 일치해야 합니다 프론트 엔드 코드의 기원
http://127.0.0.1:3000. 시*자격을 요청과는 와일드카드*][1]에 반 HTTP 액세스 제어(CORS)문서입니다. 을 제어하는 경우에는 서버에 요청을 보내는 다음,일반적인 방법을 다루는,이 경우 서버를 구성하는 값의
근원요청 헤더,에코/반영하는 것으로의 접근을 원산지
응답 헤더가 있습니다. 예를 들어,nginx:
add_header Access-Control-Allow-Origin $http_origin
나를 사용하여 Chrome. 도를 사용하는 크롬 CORS 플러그인 는 크롬 CORS 플러그인을 분명히 그냥 simplemindedly 주는
액세스 제어할 수 있 출처:*
헤더를 응답으로 브라우저에 보게 됩니다. 는 경우 플러그인을 했다 더 똑똑하게,무엇을 하는 것은 값을 설정하는 가짜액세스 제어할 수 있 원산지
응답 헤더를 실제의 기원하는 프 JavaScript 코드http://127.0.0.1:3000
. 그래서 사용하지 않는 플러그인,도에 대한 테스트합니다. 그것은 단지 주의 산만이다. 을 테스트하려면 어떤 반응을 얻는 서버에서 브라우저 그들을 필터링,당신은 더 나은 사용하는컬-H
같습니다.멀리로는 프런트 엔드 JavaScript 코드
가져올(...)
요청에 질문:
headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
headers.append('Access-Control-Allow-Credentials', 'true');
을 제거합니다. 는액세스 제어-허용*
헤더응답헤더가 있습니다. 당신은 결코 그들을 보내에 요청합니다. 만 효과가 있을 것입을 트리거하는 브라우저를 하는 과다가있다.
이 오류가 발생한 경우 클라이언트 URL 을 서버는 URL don't 치 포함한 포트 번호가 있습니다. 이 경우에 사용하도록 설정해야 합 귀하의 서비스를 위한 CORS 는 십자가 원산지 리소스를 공유합니다.
호스팅하는 경우 봄 나머지는 서비스는 다음 당신은 그것을 찾을 수 있습니다에서 블로그 포스팅CORS 지원 Spring Framework.
호스팅하는 경우에는 서비스를 사용하여 Node.js 그러면 서버
npm cors-저장
var cors=필요로('cors')
app.용(cors())//사용하여 이 후에는 변수 선언
문제가 발생하기 때문에 추가로 다음 코드요청헤더에서 프런트 엔드:
headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
headers.append('Access-Control-Allow-Credentials', 'true');
이러한 헤더에 속하는응답,지 않는 요청을 합니다. 그래서*제거***들을,다음과 같은 줄을 포함할 수 있습니다:
headers.append('GET', 'POST', 'OPTIONS');
귀하의 요청했'Content-Type:응용 프로그램/json',따라서 트리거 무엇이라고 CORS 과다가있다. 이로 인해 브라우저가 보낸 요청 옵션 방법입니다. 볼CORS preflight에 대한 자세한 정보를 확인할 수 있습니다.
따라서 귀back-end,당신은 이것을 처리 preflighted 요청에 반환하여 응답에 헤더를 포함한다:
Access-Control-Allow-Origin : http://localhost:3000
Access-Control-Allow-Credentials : true
Access-Control-Allow-Methods : GET, POST, OPTIONS
Access-Control-Allow-Headers : Origin, Content-Type, Accept
물론,실제 구문에 따라 프로그래밍 언어를 사용한니다.
에서 전면-종료해야한다,그래서 다음과 같:
function performSignIn() {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json');
headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password));
headers.append('Origin','http://localhost:3000');
fetch(sign_in, {
mode: 'cors',
credentials: 'include',
method: 'POST',
headers: headers
})
.then(response => response.json())
.then(json => console.log(json))
.catch(error => console.log('Authorization failed : ' + error.message));
}
내 경우에는,그 사용은 아래 솔루션
프런트엔드 또는 각
post(
this.serverUrl, dataObjToPost,
{
headers: new HttpHeaders({
'Content-Type': 'application/json',
})
}
)
백-엔드(사용 php)
header("Access-Control-Allow-Origin: http://localhost:4200");
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header("Access-Control-Allow-Headers: Content-Type, Authorization");
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
print_r($request);
다만 나의...에 관한하는 방법**를 사용 CORS 프록시의 주위에 얻는"아니오액세스 제어할 수 있 원산지
헤더의 문제"*
당신의 사람들을 위해 작업 php 에 백엔드,배포하면"CORS proxy"으로 간단:
$URL=$_GET['url']; echo json_encode(file_get_contents($URL)); 죽습니다();
가져올('https://example.com/no-cors.php'+'?url='+url) .다음(응답=>{*/처리 대응/*})
제 경우에는 웹 서버 방지"옵션"방법
체크인 웹 서버의 옵션에 대한 방법
-아파치:https://www-01.ibm.com/support/docview.wss?uid=ibm10735209 -webtier:4.4.6 비활성화 옵션 방법 https://docs.oracle.com/cd/E23943_01/web.1111/e10144/getstart.htm#HSADM174 -nginx:https://medium.com/@hariomvashisth/cors-on-nginx-be38dd0e19df
I'm 사"webtier"
/www/webtier/domains/[domainname]/config/fmwconfig/components/OHS/VCWeb1/httpd.conf
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_METHOD} ^OPTIONS
RewriteRule .* . [F]
</IfModule>
변경
<IfModule mod_rewrite.c>
RewriteEngine off
RewriteCond %{REQUEST_METHOD} ^OPTIONS
RewriteRule .* . [F]
</IfModule>
사용 데이터 형식:'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
나는 봄을 가진 나머지,그리고 나는 그것을 해결을 추가하 AllowedMethods 로 WebMvcConfigurer.
@Value( "${app.allow.origins}" )
private String allowOrigins;
@Bean
public WebMvcConfigurer corsConfigurer() {
System.out.println("allow origin: "+allowOrigins);
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
//.allowedOrigins("http://localhost")
.allowedOrigins(allowOrigins)
.allowedMethods("PUT", "DELETE","GET", "POST");
}
};
}
는 가장 빠른 해결할 수 있게 설치하는 것입 moesif CORS 확장자.
https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc?hl=en-US
일단 설치를 클릭합니에서 당신의 브라우저 확장을 활성화합니다. 는지 확인 아이콘의 라벨에서"off" "on"; 다시 고쳐 응용 프로그램의 API 를 요청이 작동하! 플러그인이 확실히 문제를 해결합니다. 그러나,이를 해결만 적용됩니다 당신의 자신의 기계입니다. 지역 발전에,그것의 정밀한 있는 플러그인 설치를 얻을 수 있습니다 과거에 오류가 있습니다.