我正试图在我的svelte应用程序上使用谷歌登录,向一个快速服务器发送一个请求,但在火狐上,我得到了一个Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:8080/login. (Reason: CORS request did not succeed). Status code: (null).错误,而在Chrome上,我得到了GET https://localhost:8080/login net::ERR_SSL_PROTOCOL_ERROR,
这是我在快车上的代码:
"use strict";
import express from "express";
import cors from 'cors';
import { getAllForms } from "./services/get_form";
import { googleLogin } from "./services/auth";
const app = express();
app.use(cors({
origin: 'https://localhost:3000',
}))
app.get("/login", (req, res) => {
const auth = googleLogin();
res.send(auth);
})
app.listen(8080)和前部:
<script>
import HomeDialog from '../components/dialog/HomeDialog.svelte';
const login = async () => {
await fetch('https://localhost:8080/login').then((response) => {
console.log('response', response);
});
};
</script>
<svelte:head>
<title>Jamboit - Create a Game</title>
</svelte:head>
<HomeDialog
>Create a new Game
<button on:click={login}> Log in </button>
</HomeDialog>关于如何使这件事成功,有什么建议吗?
发布于 2022-07-20 05:09:31
除非您的服务器安装了HTTPS、有效证书和有效私钥,否则不能使用https协议。证书不必由公共证书颁发机构颁发(即可以自签名),但系统必须信任它。要修复错误,只需将协议更改为http即可。确保源与CORS配置中的正确协议相匹配;它可能需要是http。
发布于 2022-07-20 05:48:00
app.use(cors()) // only this should works for every case also you can try
app.use(cors({
origin: '*' // that will for all like https / http
}))具体来源:
app.use(cors({
origin: ['your site url','your site url'] // for allowing multiple sites
}))发布于 2022-07-20 05:08:45
我编写了这个简单的指南来解释在本地主机上禁用跨源限制的主要解决方案(因此在本地开发应用程序时修复任何CORS错误),我将在下面更详细地解释。
附带了一个配置设置,它允许您在开发中简单地代理API请求。这可以在react script@0.2.3中找到。为此,将代理设置添加到您的package.json中,如下所示
代理:"https://cat-fact.herokuapp.com/",
现在,当您向https://localhost:3000/api/facts发出API请求时,React将代理API请求到https://cat-fact.herokuapp.com/facts,CORS错误将得到解决。
这是一个非常简单的解决方案,在涉及多个API或需要某些类型的API身份验证的更复杂的情况下可能无法工作。
浏览器
您可以直接禁用浏览器中的CORS。如果这样做,请注意您正在禁用出于某种原因而存在的安全限制。我不建议在禁用CORS的情况下浏览网页,只需在开发您的网站/应用程序时禁用它。
Chrome (在Mac上):在最新版本的Chrome (在v84上测试)中,禁用CORS最可靠的方法是在禁用网络安全的情况下运行它。
强制退出Chrome通过转到mac菜单并按下“强制退出”(或按下命令Q)。然后运行以下命令以打开禁用web安全性的Chrome
打开-n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome.app user-data-dir=“/tmp/ Chrome _test”-禁用-web-安全性
一旦你完成开发,重启Chrome,它就会恢复正常。
火狐:在火狐中禁用CORS的最简单和最可靠的方法是安装CORS无处不在的插件。
Safari :中CORS的最简单和最可靠的方法是在“开发”菜单中禁用CORS。
通过进入Preferences > Advanced来启用“开发”菜单。然后从“开发”菜单中选择“禁用交叉来源限制”。完成开发后,重新启动Safari,它将恢复正常。
最后,您可以使用像cors-anywhere.这样的代理。
https://stackoverflow.com/questions/73046221
复制相似问题