Chrome "access-Control-Allow-Origin" header for origin error (CORS) - google-chrome

I have the following setup:
Webserver 1 https://localhost:8888
Webserver 2 https://localhost:9005
Webserver 3 https://localhost:9006
I open https://localhost:8888 from a Web browser and enter the following JS code.
(async () => {
const endpointId = '1d60eb5195725648';
const continueUrl = 'https://localhost:9006/'
const signinUrl = new URL('https://localhost:9005/_login');
signinUrl.searchParams.set('continue', continueUrl);
signinUrl.searchParams.set('endpoint', endpointId);
const response = await fetch(signinUrl.toString(), {
credentials: 'include',
headers: {
'Authorization': `Bearer ${gapi.auth.getToken().access_token}`,
},
});
})();
I'm getting this error in my Chrome Browser Version 102.0.5005.115
Access to fetch at 'https://localhost:9006/?TOKEN=0<Truncated>c&endpoint=1d60eb5195725648' (redirected from 'https://localhost:9005/_login?continue=https%3A%2F%2Flocalhost%3A9006%2F&endpoint=1d60eb5195725648') from origin 'https://localhost:8888' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'https://localhost:8888' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Looks like Origin field is correct according to the info in Headers. What am I missing?
(I truncated Token to improve readability)
Requests:
Request URL: https://localhost:9005/_login?continue=https%3A%2F%2Flocalhost%3A9006%2F&endpoint=1d60eb5195725648
Request Method: OPTIONS
Status Code: 200 OK
Remote Address: [::1]:9005
Referrer Policy: origin
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Authorization
Access-Control-Allow-Headers: Proxy-Authorization
Access-Control-Allow-Methods: GET
Access-Control-Allow-Origin: https://localhost:8888
Content-Length: 0
Date: Sun, 12 Jun 2022 02:47:09 GMT
--
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,es;q=0.8
Access-Control-Request-Headers: authorization
Access-Control-Request-Method: GET
Cache-Control: no-cache
Connection: keep-alive
Host: localhost:9005
Origin: https://localhost:8888
Pragma: no-cache
Referer: https://localhost:8888/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36
Request URL: https://localhost:9005/_login?continue=https%3A%2F%2Flocalhost%3A9006%2F&endpoint=1d60eb5195725648
Request Method: GET
Status Code: 302 Found
Remote Address: [::1]:9005
Referrer Policy: origin
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://localhost:8888
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Content-Length: 360
Content-Type: text/html; charset=utf-8
Date: Sun, 12 Jun 2022 02:47:09 GMT
Expires: Mon, 01 Jan 1990 00:00:00 GMT
Location: https://localhost:9006/?TOKEN=00cfdab4e480656ed7d71b3e58df42fe5422d85d33118a5af5fb7cc66f2d81330b46740ccbca4927ecfe841e751f0de72fdf53c4eb7d66b7c5ab857e33c6beaa270950fe0c49047fd5260db3120731d0abbfe3be1a0d316db4b0754610c81e2b070cea24e46e0e5ef76937c65832ef7c315b452b846e87f59be3124478cee49045162c&endpoint=1d60eb5195725648
Pragma: no-cache
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,es;q=0.8
Authorization: Bearer ya29.a0ARrdaM8mfOksOCl6l4O13z5PQv1cUVgKDKWgbo_rNXDL_Fw_-aedVVJdAFOSYByUjEy1WYrAKoik0KHx_c69aCXZcuAXbYedYkZRtDb5Y3Bz98eqjrOBjT0XrWspWdGNqRvsq_L_rDERdnsUFDFKCNiFCHV4sg
Cache-Control: no-cache
Connection: keep-alive
Cookie: _ga=GA1.1.1057744305.1654277711; _gid=GA1.1.1514740287.1654641546; _gat=1
Host: localhost:9005
Origin: https://localhost:8888
Pragma: no-cache
Referer: https://localhost:8888/
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="102", "Google Chrome";v="102"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "macOS"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36
Request URL: https://localhost:9006/?TOKEN=00cfdab4e480656ed7d71b3e58df42fe5422d85d33118a5af5fb7cc66f2d81330b46740ccbca4927ecfe841e751f0de72fdf53c4eb7d66b7c5ab857e33c6beaa270950fe0c49047fd5260db3120731d0abbfe3be1a0d316db4b0754610c81e2b070cea24e46e0e5ef76937c65832ef7c315b452b846e87f59be3124478cee49045162c&endpoint=1d60eb5195725648
Referrer Policy: origin
Provisional headers are shown
Learn more
Referer: https://localhost:8888/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

Related

Chrome dev tools response encoded json

I am trying to read a http post request data using Chrome developer tools but both payload and response is encoded instead of Json format.
request headers:
Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9,cy;q=0.8,fa;q=0.7,tr;q=0.6
Cache-Control: no-cache
Connection: keep-alive
Content-Length: 88
Content-Type: application/json
Host: 192.168.88.11
Origin: http://192.168.88.11
Pragma: no-cache
Referer: http://192.168.88.11/?16550159
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36
X-Requested-With: XMLHttpRequest
response headers:
Connection: keep-alive
Content-Type: text/html
Date: Sun, 12 Jun 2022 09:15:28 GMT
Transfer-Encoding: chunked
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
request payload
LyZJQwGM78nstubJ5ZHF63GzcsNSIli+ntpDXOkrmPHachPL9WQaCWc6DLLaoQ8WHSch4zCLwQvj7jE745KrHQ==
How can I see this payload in Json format?

Chrome refuses to cache http response

I set max-age in Cache-Control header, but every time when I reload the webpage, it just goes out and fetches the resource again, following is an example request and response headers:
Request Headers
:authority: mydomain.com
:method: GET
:path: /.well-known/openid-configuration
:scheme: https
accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
accept-encoding: gzip, deflate, br
accept-language: en
cache-control: max-age=0 // I have no idea why this is sent in request by chrome
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="98", "Google Chrome";v="98"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
sec-fetch-dest: document
sec-fetch-mode: navigate
sec-fetch-site: none
sec-fetch-user: ?1
upgrade-insecure-requests: 1
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36
Response Headers
access-control-allow-credentials: true
cache-control: public, s-maxage=2678400, max-age=14400, immutable
cf-cache-status: DYNAMIC
cf-ray: 6e7465234fc16c30-SIN
content-encoding: br
content-type: application/json; charset=utf-8
date: Sat, 05 Mar 2022 16:58:12 GMT
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?s=dSVocqHdnD4mopGV2L7pD08hRF3MZbpmBAsNHWm2eBznl15JNgOU7bkNcBn4qgoszBpGpGoCBPSbgCLWq796dv0jta9Ajlwq0BCEyW55h3Q2NO7mfQuz8cABZLAgWam4"}],"group":"cf-nel","max_age":604800}
server: cloudflare
vary: Origin, Accept-Encoding

POST request is success, but Chrome get XMLHttpRequestError

I'm trying to upload binary file (to Amazon S3) from my localhost Vue page, using Amazon API Gateway with CORS enabled.
Actual POST Request have issued after Preflight Request issued.
And file upload have succeed.
But the POST Request have caught error bellow.
I don't know Why got the error?
Chrome(Version 79.0.3945.79)
got message
Access to XMLHttpRequest at 'https://XXXXXXXXXXX.execute-api.ap-northeast-1.amazonaws.com/dev/upload' from origin 'http://192.168.0.20:8080' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
AXIOS ERROR: Error: Network Error
at createError (createError.js?2d83:16)
at XMLHttpRequest.handleError (xhr.js?b50d:81)
Source code
async upload() {
console.log("file:", this.file);
const axiosConfig = {
headers: {
"Content-Type": "image/png"
}
};
axios
.post("https://XXXXXXXXXX.execute-api.ap-northeast-1.amazonaws.com/dev/upload", this.file, axiosConfig)
.then(res => {
console.log("RESPONSE RECEIVED: ", res);
})
.catch(err => {
console.log("AXIOS ERROR: ", err);
});
Header(Preflight Request)
Request
:authority: XXXXXXXXXX.execute-api.ap-northeast-1.amazonaws.com
:method: OPTIONS
:path: /dev/upload
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9,ja;q=0.8
access-control-request-headers: content-type
access-control-request-method: POST
origin: http://192.168.0.20:8080
referer: http://192.168.0.20:8080/
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.79 Safari/537.36
Response
access-control-allow-headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token
access-control-allow-methods: DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT
access-control-allow-origin: *
content-length: 0
content-type: application/json
date: Fri, 13 Dec 2019 12:39:40 GMT
status: 200
via: 1.1 88c2e4442XXX3f0dXXX7df6fcXXX37ff.cloudfront.net (CloudFront)
x-amz-apigw-id: EpH19E9sNjMFhOg=
x-amz-cf-id: PEXXXH0x8_mlAspmv-xhi3X3XXXn_LSBswhXXXyqnCGZmVPkXXXYhw==
x-amz-cf-pop: NRT51-C1
x-amzn-requestid: 47XXc915-3b44-4XX7-959a-3XXX62150b3d
x-cache: Miss from cloudfront
Header(Actual POST)
Request
:authority: XXXXXXXXXX.execute-api.ap-northeast-1.amazonaws.com
:method: POST
:path: /dev/upload
:scheme: https
accept: application/json, text/plain, */*
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9,ja;q=0.8
content-length: 6849
content-type: image/png
origin: http://192.168.0.20:8080
referer: http://192.168.0.20:8080/
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.79 Safari/537.36
Response
content-length: 47
content-type: application/json
date: Fri, 13 Dec 2019 12:39:40 GMT
status: 200
via: 1.1 88c2e44426XX3f0db837df6fc92437ff.cloudfront.net (CloudFront)
x-amz-apigw-id: EpH1_EeptjMFXqw=
x-amz-cf-id: XXqDis00oJqvh8wY-a0sugE6tuhwPHiJLs7ucXX5OdPC0uoCql7-nQ==
x-amz-cf-pop: NRT51-C1
x-amzn-requestid: 9XXX54a0-0a71-4cda-9d91-ae90a3322c9f
x-amzn-trace-id: Root=1-5XXX868c-fXXXa33dd82751efXXX547d;Sampled=0
x-cache: Miss from cloudfront
I solved it myself.
I don't know Why got the error?
Because Response header includes NO 'access-control-allow-origin'.
Browser could't read response body by CORB (Cross-Origin Read Blocking).
Added the header to response in Lambda function, it works.
s3.putObject({
Body: requestBody,
Bucket: "xxxxxx.com",
ContentType: "image/png",
Key: "uploadTest/logo.png"
})
.promise()
.then(result => {
const message = JSON.stringify(result);
callback(null, {
body: message,
statusCode: 200,
headers: {
"Access-Control-Allow-Origin": "*"
}
});
});

Why refresh browser the image Response Status is 200, not 304?

I write a simple code:
<?php
echo "<h1>1233422</h1>";
?>
<html>
<img src="screen.png"/>
</html>
there is an image in the html, but when I refresh the browser page the png image is 200.
theoretically the image response status should be 304, why there is 200?
Two times request's Response Header are:
HTTP/1.1 200 OK
Content-Type: image/png
server: PhpStorm 10.0.1
date: Fri, 07 Dec 2018 03:35:42 GMT
cache-control: private, must-revalidate
last-modified: Fri, 07 Dec 2018 03:34:56 GMT
content-length: 11437
the second request Headers:
GET /test03-hante/screen.png HTTP/1.1
Host: localhost:63342
Connection: keep-alive
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Referer: http://localhost:63342/test03-hante/index.php
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Cookie: wp-settings-time-1=1539853185; Webstorm-b87204fd=531be1b1-a109-47c6-97d9-4dd7b886ebde
you see, there is no If-Modified-Since and If-Non-Match params, why?
In browser refresh, HTTP image response status is "200 (cache)" because in refresh the image loaded from your browser cache.
You can learn more from this answer: https://stackoverflow.com/a/1665097/6678086

ReactJS fetch post API 405 issue

I am using swagger to post APi which works fine, but when I post it from react jsm that cause 405 issue.
Fiddler appears the RAW information for swagger as following:
POST http://localhost:7100/api/test/submit?guid=17327026-4348-4ce9-aceb-5774c3a724bf HTTP/1.1
Host: localhost:7100
Connection: keep-alive
Content-Length: 14
Origin: http://localhost:7100
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.78 Safari/537.36
Content-Type: application/json
Accept: */*
Referer: http://localhost:7100/swagger/ui/index
Accept-Encoding: gzip, deflate, br
Accept-Language: en,en-US;q=0.8,zh;q=0.6,zh-CN;q=0.4
Cookie: ASP.NET_SessionId=yzdydpdimqvgpvejykzjqqqb; .ASPXAUTH=dWLGc_XQvl3qTNrEJXsRyk3w-tXBSFeXKC0bIUDzLDLFJi5kbSAt_hcJXQs0-pfz7uVm-VJ27ZGAbN8eErCNV-Wozn3D1ZbHD7ONNN5VCMjT_Joyz_1aIcTZLR401s0TtC4Br1sRlerv0zX4F4xnDLhrIm5YKkGfZj2aZzDgc-KjNPVWY1SEC6k2XqPq54vo9_HUvudihHGlneNx1n2JlodvFxAeYudKnUSBRWpp2rRAx94uF7KmmP5BQoTmBTTq1qKSv98YiPToicePFR32d9yk1Uw1qcFrnkKD2zKOCuJByNgCLN_eC5dOmdLKfPCekciEJ16KfeYg8XeApIf13vCrtGOy-L2EXibWuEjUjKCrUy8sfYTGNZbxDffTg9gNOn7-nfyR5hKLYDM0CxfmENV7S0ExTSFyGhsR5aqqB3oXq3A_i8ENabgGMy_tFyor06S7_vrUUcDlS2hFgsxWzgMrRUdVIlohHK2-slPdbhwuUKIZXKKiSQijwH0RskwF-l8RyVe_0VCcCVipk4MXtncDvrubmEW09LWeOycyc0wc1BmMHL9AATpBHA6WBNLEaMGS9-x-RhFC5YNJW1KtetmlXiaKmiX9L-2wWhVRgjlhmfjtRPjxlVvW1GxyeKC-JOlSPnY6DInNM-qa2dcZjdaoffdnLBvzKTHkJNwzUSZw8fN-Vz6SVmURMtpEQAKmxloNvw
"test working"
for post from react as following:
OPTIONS http://localhost:7100/api/test/submit?guid=17327026-4348-4CE9-ACEB-5774C3A724BF HTTP/1.1
Host: localhost:7100
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.78 Safari/537.36
Access-Control-Request-Headers: content-type
Accept: */*
Referer: http://localhost:3000/?testId=17327026-4348-4ce9-aceb-5774c3a724bf
Accept-Encoding: gzip, deflate, br
Accept-Language: en,en-US;q=0.8,zh;q=0.6,zh-CN;q=0.4
I believe something wrong in following fetch post function, is there any chance to fix it, then the RAW information can be same as first one.
onFormSubmit(Result) {
fetch("http://localhost:7100/api/test/submit?guid=" + "17327026-4348-4CE9-ACEB-5774C3A724BF",
{
method: 'POST',
// headers: {'Content-Type':'application/x-www-form-urlencoded'},
headers: {'Content-Type':'application/json'},
// contentType: 'application/json; charset=utf-8',
// body: JSON.stringify(result)
body: "test working"
})
.then((response) => {
console.log(response.ok ? 'success' : 'error');
})
.catch(function (error) {
console.log('catch error');
});
}
This is a CORS Issue You need to allow requests comming from http://localhost:3000 in you server.