Google API에 jQuery Post를 보내는 동안 Access-Control-Allow-Origin 오류가 발생했습니다.
"Access-Control-Allow-Origin" 오류에 대해 많이 읽었는데 무엇을 수정해야 하는지 모르겠습니다.
Google Moderator API를 사용하고 있지만 새로운 seri를 추가하려고 하면 다음과 같은 메시지가 나타납니다.
XMLHttpRequest cannot load
https://www.googleapis.com/moderator/v1/series?key=[key]
&data%5Bdescription%5D=Share+and+rank+tips+for+eating+healthily+on+the+cheaps!
&data%5Bname%5D=Eating+Healthy+%26+Cheap
&data%5BvideoSubmissionAllowed%5D=false.
Origin [my_domain] is not allowed by Access-Control-Allow-Origin.
콜백 파라미터를 사용하거나 사용하지 않고 헤더에 'Access-Control-Allow-Origin *'를 추가하려고 했습니다.그리고 $.getJ 사용법을 몰라요.여기에 있는 SON(해당하는 경우)은 Authorization 헤더를 추가해야 하고 $.ajax에서 beforeCall 없이 어떻게 해야 하는지 모르기 때문입니다.
이 어둠에 빛은 없나?
그게 바로 암호입니다.
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
var scope = "https://www.googleapis.com/auth/moderator";
var token = '';
function create(){
if (token == '')
token = doCheck();
var myData = {
"data": {
"description": "Share and rank tips for eating healthily on the cheaps!",
"name": "Eating Healthy & Cheap",
"videoSubmissionAllowed": false
}
};
$.ajax({
url: 'https://www.googleapis.com/moderator/v1/series?key='+key,
type: 'POST',
callback: '?',
data: myData,
datatype: 'application/json',
success: function() { alert("Success"); },
error: function() { alert('Failed!'); },
beforeSend: setHeader
});
}
function setHeader(xhr) {
xhr.setRequestHeader('Authorization', token);
}
function doLogin(){
if (token == ''){
token = google.accounts.user.login(scope);
}else{
alert('already logged');
}
}
function doCheck(){
token = google.accounts.user.checkLogin(scope);
return token;
}
</script>
...
...
<div data-role="content">
<input type="button" value="Login" onclick="doLogin();">
<input type="button" value="Get data" onclick="getModerator();">
<input type="button" value="Create" onclick="create();">
</div><!-- /content -->
Access-Control-Allow-Origin 오류를 해결했습니다.dataType 파라미터를 dataType:'jsonp'로 변경하고 crossDomain:true를 추가했습니다.
$.ajax({
url: 'https://www.googleapis.com/moderator/v1/series?key='+key,
data: myData,
type: 'GET',
crossDomain: true,
dataType: 'jsonp',
success: function() { alert("Success"); },
error: function() { alert('Failed!'); },
beforeSend: setHeader
});
나는 정확히 같은 문제를 가지고 있었고 그것은 교차 도메인이 아니라 같은 도메인이었다.저는 방금 이 행을 ajax 요청을 처리하던 php 파일에 추가했습니다.
<?php header('Access-Control-Allow-Origin: *'); ?>
그것은 마법처럼 작동했다.포스터 덕분에
헤더를 추가할 수 없는 서비스를 사용하려고 하면 이 오류가 발생합니다.Access-Control-Allow-Origin *서버 앞에 리버스 프록시를 둘 수 있습니다.헤더 개서를 하면 오류를 피할 수 있습니다.
응용 프로그램이 포트 8080(www.mydomain.com의 퍼블릭 도메인)에서 실행되고 있으며 포트 80의 같은 호스트에 리버스 프록시를 배치했다고 가정하면 Nginx 리버스 프록시의 설정은 다음과 같습니다.
server {
listen 80;
server_name www.mydomain.com;
access_log /var/log/nginx/www.mydomain.com.access.log;
error_log /var/log/nginx/www.mydomain.com.error.log;
location / {
proxy_pass http://127.0.0.1:8080;
add_header Access-Control-Allow-Origin *;
}
}
네, jQuery가 URL이 다른 도메인에 속해 있다고 판단하면 그 콜을 크로스 도메인콜로 간주하기 때문에crossdomain:true는 여기서 필수가 아닙니다.
또, 와 동기 콜을 발신할 수 없는 것에 주의해 주세요.$.ajaxURL이 다른 도메인(크로스 도메인)에 속해 있거나 JSONP를 사용하고 있는 경우.비동기 호출만 허용됩니다.
주의: 서비스를 동기적으로 호출할 수 있습니다.async:false요청하신 대로입니다.
php에 약간의 해킹이 있습니다.또한 Google뿐만 아니라 사용자가 제어하지 않는 웹 사이트에서도 사용할 수 있으며 Access-Control-Allow-Origin을 추가할 수 없습니다.*
웹 서버에서 PHP 파일(예: getContentFromUrl.php)을 생성하여 약간의 트릭을 만들어야 합니다.
PHP
<?php
$ext_url = $_POST['ext_url'];
echo file_get_contents($ext_url);
?>
JS
$.ajax({
method: 'POST',
url: 'getContentFromUrl.php', // link to your PHP file
data: {
// url where our server will send request which can't be done by AJAX
'ext_url': 'https://stackoverflow.com/questions/6114436/access-control-allow-origin-error-sending-a-jquery-post-to-google-apis'
},
success: function(data) {
// we can find any data on external url, cause we've got all page
var $h1 = $(data).find('h1').html();
$('h1').val($h1);
},
error:function() {
console.log('Error');
}
});
구조:
- JS의 도움을 받아 브라우저가 서버에 요청을 보냅니다.
- 서버는 다른 서버로 요청을 전송하고 다른 서버(모든 웹 사이트)로부터 응답을 받습니다.
- 서버가 이 응답을 JS로 보냅니다.
또한 이벤트를 만들 수 있습니다.클릭하면 이 이벤트를 버튼에 올립니다.이게 도움이 되길 바라!
JavaScript에서 내 코드 사용
var settings = {
"url": "https://myinboxhub.co.in/example",
"method": "GET",
"timeout": 0,
"headers": {},
};
$.ajax(settings).done(function (response) {
console.log(response);
if (response.auth) {
console.log('on success');
}
}).fail(function (jqXHR, exception) {
var msg = '';
if (jqXHR.status === '(failed)net::ERR_INTERNET_DISCONNECTED') {
msg = 'Uncaught Error.\n' + jqXHR.responseText;
}
if (jqXHR.status === 0) {
msg = 'Not connect.\n Verify Network.';
} else if (jqXHR.status == 413) {
msg = 'Image size is too large.';
} else if (jqXHR.status == 404) {
msg = 'Requested page not found. [404]';
} else if (jqXHR.status == 405) {
msg = 'Image size is too large.';
} else if (jqXHR.status == 500) {
msg = 'Internal Server Error [500].';
} else if (exception === 'parsererror') {
msg = 'Requested JSON parse failed.';
} else if (exception === 'timeout') {
msg = 'Time out error.';
} else if (exception === 'abort') {
msg = 'Ajax request aborted.';
} else {
msg = 'Uncaught Error.\n' + jqXHR.responseText;
}
console.log(msg);
});;
PHP의 경우
header('Content-type: application/json');
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET");
header("Access-Control-Allow-Methods: GET, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Content-Length, Accept-Encoding");
제 경우 서브 도메인 이름이 문제의 원인입니다.상세내용은 다음과 같습니다.
하였습니다.app_development.something.com서 밑줄은「」입니다._ 에러를 CORS를 사용하다★★★★★★★★★★★★★를 변경한 후app_development로로 합니다.app-development정상적으로 동작합니다.
언급URL : https://stackoverflow.com/questions/6114436/access-control-allow-origin-error-sending-a-jquery-post-to-google-apis
'programing' 카테고리의 다른 글
| HTML 문자열을 사용자 정의 스타일과 바인딩 (0) | 2023.03.12 |
|---|---|
| Wordpress에서 관리 메뉴 항목 숨기기 (0) | 2023.03.12 |
| @문자열에서 정수로의 값 주석 유형 (0) | 2023.03.12 |
| "JSX 요소에 암묵적으로 "임의" 유형의 오류가 있습니다."를 해결하는 방법 (0) | 2023.03.12 |
| Oracle SQL 삽입 With 절 (0) | 2023.03.12 |