首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何避免本地主机的CORS和SSL错误?

如何避免本地主机的CORS和SSL错误?
EN

Stack Overflow用户
提问于 2022-07-20 05:03:14
回答 3查看 2K关注 0票数 -3

我正试图在我的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

这是我在快车上的代码:

代码语言:javascript
运行
复制
"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)

和前部:

代码语言:javascript
运行
复制
<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>

关于如何使这件事成功,有什么建议吗?

EN

回答 3

Stack Overflow用户

发布于 2022-07-20 05:09:31

除非您的服务器安装了HTTPS、有效证书和有效私钥,否则不能使用https协议。证书不必由公共证书颁发机构颁发(即可以自签名),但系统必须信任它。要修复错误,只需将协议更改为http即可。确保源与CORS配置中的正确协议相匹配;它可能需要是http

票数 1
EN

Stack Overflow用户

发布于 2022-07-20 05:48:00

代码语言:javascript
运行
复制
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 
}))

具体来源:

代码语言:javascript
运行
复制
app.use(cors({
  origin: ['your site url','your site url'] // for allowing multiple sites
}))
票数 1
EN

Stack Overflow用户

发布于 2022-07-20 05:08:45

我编写了这个简单的指南来解释在本地主机上禁用跨源限制的主要解决方案(因此在本地开发应用程序时修复任何CORS错误),我将在下面更详细地解释。

  1. Use -- Create 中的代理设置

附带了一个配置设置,它允许您在开发中简单地代理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身份验证的更复杂的情况下可能无法工作。

浏览器

  1. Disable 中的CORS

您可以直接禁用浏览器中的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,它将恢复正常。

  1. 使用代理来避免CORS错误

最后,您可以使用像cors-anywhere.这样的代理。

票数 -3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73046221

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档