我正在开发一个无服务器反应应用程序，该应用程序从浏览器调用 Notion API，但无论我做什么，我似乎都无法避免出现 CORS 错误。我需要设置哪些标题才能完成这项工作？
问问题
1040 次
2 回答
0
您可以在 freenom 上注册一个域名。使用 cloudfare 作为域名。在cloudfare中，你可以添加一个服务（worker），下面的代码是给worker的。
// Set CORS headers
response.headers.set("Access-Control-Allow-Origin", "*")
这将解决 cors 错误。
工作人员基本上只是修改您的请求和响应。
这是链接https://developers.cloudflare.com/workers/examples/cors-header-proxy
工人（服务）代码
// We support the GET, POST, HEAD, and OPTIONS methods from any origin,
// and allow any header on requests. These headers must be present
// on all responses to all CORS preflight requests. In practice, this means
// all responses to OPTIONS requests.
const corsHeaders = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET,HEAD,POST,OPTIONS",
"Access-Control-Max-Age": "86400",
}
// The URL for the remote third party API you want to fetch from
// but does not implement CORS
// Your notion URL
const API_URL = "https://api.notion.com/v1/databases/123123/query"
// The endpoint you want the CORS reverse proxy to be on
const PROXY_ENDPOINT = "/getAllBook"
// Your notion api token
const token = "";
// The rest of this snippet for the demo page
function rawHtmlResponse(html) {
return new Response(html, {
headers: {
"content-type": "text/html;charset=UTF-8",
},
})
}
const DEMO_PAGE = `
<!DOCTYPE html>
<html>
<body>
<h1>API GET without CORS Proxy</h1>
<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Checking_that_the_fetch_was_successful">Shows TypeError: Failed to fetch since CORS is misconfigured</a>
<p id="noproxy-status"/>
<code id="noproxy">Waiting</code>
<h1>API GET with CORS Proxy</h1>
<p id="proxy-status"/>
<code id="proxy">Waiting</code>
<h1>API POST with CORS Proxy + Preflight</h1>
<p id="proxypreflight-status"/>
<code id="proxypreflight">Waiting</code>
<script>
let reqs = {};
reqs.noproxy = () => {
return fetch("${API_URL}").then(r => r.json())
}
reqs.proxy = async () => {
let href = "${PROXY_ENDPOINT}?apiurl=${API_URL}"
return fetch(window.location.origin + href).then(r => r.json())
}
reqs.proxypreflight = async () => {
let href = "${PROXY_ENDPOINT}?apiurl=${API_URL}"
let response = await fetch(window.location.origin + href, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
msg: "Hello world!"
})
})
return response.json()
}
(async () => {
for (const [reqName, req] of Object.entries(reqs)) {
try {
let data = await req()
document.getElementById(reqName).innerHTML = JSON.stringify(data)
} catch (e) {
document.getElementById(reqName).innerHTML = e
}
}
})()
</script>
</body>
</html>`
async function handleRequest(request) {
const url = new URL(request.url)
let apiUrl = url.searchParams.get("apiurl")
if (apiUrl == null) {
apiUrl = API_URL
}
// Rewrite request to point to API url. This also makes the request mutable
// so we can add the correct Origin header to make the API server think
// that this request isn't cross-site.
request = new Request(apiUrl, request)
request.headers.set("Origin", new URL(apiUrl).origin)
request.headers.set("Authorization", "Bearer "+token)
let response = await fetch(request)
// Recreate the response so we can modify the headers
response = new Response(response.body, response)
// Set CORS headers
response.headers.set("Access-Control-Allow-Origin", "*")
// Append to/Add Vary header so browser will cache response correctly
response.headers.append("Vary", "Origin")
return response
}
function handleOptions(request) {
// Make sure the necessary headers are present
// for this to be a valid pre-flight request
let headers = request.headers;
if (
headers.get("Origin") !== null &&
headers.get("Access-Control-Request-Method") !== null &&
headers.get("Access-Control-Request-Headers") !== null
){
// Handle CORS pre-flight request.
// If you want to check or reject the requested method + headers
// you can do that here.
let respHeaders = {
...corsHeaders,
// Allow all future content Request headers to go back to browser
// such as Authorization (Bearer) or X-Client-Name-Version
"Access-Control-Allow-Headers": request.headers.get("Access-Control-Request-Headers"),
}
return new Response(null, {
headers: respHeaders,
})
}
else {
// Handle standard OPTIONS request.
// If you want to allow other HTTP Methods, you can do that here.
return new Response(null, {
headers: {
Allow: "GET, HEAD, POST, OPTIONS",
},
})
}
}
addEventListener("fetch", event => {
const request = event.request
const url = new URL(request.url)
if(url.pathname.startsWith(PROXY_ENDPOINT)){
if (request.method === "OPTIONS") {
// Handle CORS preflight requests
event.respondWith(handleOptions(request))
}
else if(
request.method === "GET" ||
request.method === "HEAD" ||
request.method === "POST"
){
// Handle requests to the API server
event.respondWith(handleRequest(request))
}
else {
event.respondWith(
new Response(null, {
status: 405,
statusText: "Method Not Allowed",
}),
)
}
}
else {
// Serve demo page
event.respondWith(rawHtmlResponse(DEMO_PAGE + url.pathname))
}
})
阿贾克斯示例
$.ajax({
type: "POST",
url: "https://yourdomainname.com/getAllBook",
headers: {
"Notion-Version": "2021-08-16"
},
data : JSON.stringify(data),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function(data){
},
error: function(data){
console.log(data.statusText);
},
cache:"false"
})
于 2021-12-03T11:37:54.687 回答
-3
如果您有 CORS 问题，可以使用此 Google Chrome 扩展程序：https ://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en
于 2021-07-20T16:52:40.680 回答