액세스-제어-허용-오리진 작동하지 않음 Google Cloud Functions GCF
저는 여기가 처음인 것 같지만 GCF에 액세스하기 위해 브라우저에서 간단한 AJAX 요청을 실행하려고 하는데 Chrome이 다음과 같이 보고합니다.
XMLHttpRequest가 https://us-central1-bustling-opus-830.cloudfunctions.net/Authenticate 을 로드할 수 없습니다.요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.그러므로 오리진 'https://beast.reachboarding.com.au '은 접근이 허용되지 않습니다.
위와 같이 Authenticate(인증)라는 버킷을 사용하는 다음과 같은 기능이 기능은 다음과 같습니다.
bustling-opus-830.appspot.com
다음 JSON 파일을 사용하여 CORS를 설정하는 데 gsutil을 사용했습니다.
[{
"origin": ["https://beast.localdev.com.au","*"],
"responseHeader": ["Content-Type"],
"method": ["GET", "HEAD", "DELETE", "OPTIONS"],
"maxAgeSeconds": 3600
}]
다음 명령을 사용합니다.
gsutil cors set cors.json gs://bustling-opus-830.appspot.com/
그런 다음 해당 get 명령에서 다음 출력을 가져옵니다.
gsutil cors get gs://bustling-opus-830.appspot.com/
[{"maxAgeSeconds": 3600, "method": ["GET", "HEAD", "DELETE", "OPTIONS"], "origin": ["https://beast.localdev.com.au", "*"], "responseHeader": ["Content-Type"]}]
다음과 같이 새 함수를 만들 때 제공되는 기본 예제 코드를 사용합니다.
/**
* Responds to any HTTP request that can provide a "message" field in the body.
*
* @param {!Object} req Cloud Function request context.
* @param {!Object} res Cloud Function response context.
*/
exports.helloWorld = function helloWorld(req, res) {
// Example input: {"message": "Hello!"}
if (req.body.message === undefined) {
// This is an error case, as "message" is required.
res.status(200).send('No message defined!');
} else {
// Everything is okay.
console.log(req.body.message);
res.status(200).send(req.body.message);
}
};
그리고 간단한 HTML에 다음과 같은 자바스크립트가 포함되어 있습니다.
$.ajax({
url: "https://us-central1-bustling-opus-830.cloudfunctions.net/Authenticate",
type: "POST",
data: {
message: 'Testing'
},
dataType: 'json',
success: function (response) {
console.log(response);
},
error: function (xhr, status) {
console.log(xhr);
}
});
그 때문에 오류가 발생하고 있습니다.
내 DEV 콘솔에서 네트워크 요청이 통과되는 것을 볼 수 있습니다.받는 HTTP 응답 헤더는 다음과 같습니다.
cache-control:private
content-encoding:gzip
content-length:27
content-type:text/html; charset=utf-8
date:Wed, 08 Feb 2017 03:45:50 GMT
etag:W/"7-274e639a"
function-execution-id:azc1zqfb1tq8
server:Google Frontend
status:200
vary:Accept-Encoding
x-cloud-trace-context:70e08d634a9644c32530326de0471a64;o=1
x-cloud-trace-context:70e08d634a9644c32530326de0471a64
x-powered-by:Express
응답 헤더 내에 Access-Control-Allow-Origin 헤더가 표시되어 *가 허용됨을 나타낼 것으로 예상했지만 전혀 보이지 않습니다.
그런데 정말 이상한 것은 네트워크 항목을 보고 응답을 클릭하면 다음과 같은 메시지가 표시된다는 것입니다.
Testing
이것은 모든 것이 동등하다는 것을 의미합니다. 실제로 달렸답니다!
이전에 답변을 받은 적이 있다면 사과하지만 저는 여러 키워드를 검색했지만 아무것도 제 문제를 해결하지 못한 것 같습니다.저는 이 문제에 대한 새로운 시각(그리고 괜찮은 전문 지식)이 도움이 될 것이라고 생각했습니다.
미리 감사드립니다!
당신의 전경(HTTP) Google Cloud Function은 AJAX 클라이언트 요청에 대한 응답에서 적절한 CORS 헤더를 설정해야 합니다.HTTP Functions의 요청 및 응답 파라미터는 해당 Express와 동등한 속성을 갖습니다.CORS 헤더를 설정하고 필요에 따라 비행 전 요청에 응답하는 데 사용할 수 있는 JS 객체.
예를 들어,
exports.Authenticate = function Authenticate (req, res) {
//set JSON content type and CORS headers for the response
res.header('Content-Type','application/json');
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type');
//respond to CORS preflight requests
if (req.method == 'OPTIONS') {
res.status(204).send('');
}
//continue function ...
};
위의 머리글과 논리는 서비스의 특정 요구사항을 반영하여 수정해야 하지만 시작하는 데 도움이 되기를 바랍니다.
도 할 수 .cors
구글이 추천한 대로 이를 해결하기 위한 패키지.실제로, 그들은 자신들의 샘플 코드에 이 코드를 사용하기도 합니다.이 예를 확인합니다.이것이 코드입니다.
const cors = require('cors')({
origin: true,
});
//Your code here
//Use the following function instead of just res.send. return keyword is not compulsory here
return cors(req, res, () => {
res.send();
});
아직도 답변에 관심이 있으시다면 Express 미들웨어 https://mhaligowski.github.io/blog/2017/03/10/cors-in-cloud-functions.html 를 사용하여 이 문제를 해결하는 방법에 대한 블로그 게시물을 작성했습니다.
언급URL : https://stackoverflow.com/questions/42140247/access-control-allow-origin-not-working-google-cloud-functions-gcf
'programing' 카테고리의 다른 글
입력유형="file" set base64 이미지 데이터 (0) | 2023.10.14 |
---|---|
tinymce를 이용한 카테고리 링크 (0) | 2023.10.14 |
Objective-C Project에서 Swift Pod Framework 가져오기 및 사용 방법 (0) | 2023.10.14 |
MariaDB 설치 시 도커 빌드 고착 (0) | 2023.10.14 |
요청의 자격 증명 모드가 '포함'인 경우 응답의 헤더는 와일드카드 '*'이 되어서는 안 됩니다. (0) | 2023.10.14 |