- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我有一个 React 应用程序,我正在尝试使用 OAuth 添加 Node/Express/MySQL 后端。我的 React 应用托管在 localhost:3000 上,而 express 服务器位于 localhost:4000 上。我在 React 应用程序的 package.json 文件中添加了“代理”:“http://localhost:4000”以向服务器发送请求。 OAuth 的授权 Javascript 来源是 http://localhost:4000 .授权重定向 URI 是 http://localhost:4000/auth/google/redirect .
这些是我在尝试访问服务器上的路由时在浏览器控制台中遇到的错误:
有人说请求的资源上不存在“Access-Control-Allow-Origin” header 。
另一个说“跨源读取阻止 (CORB) 阻止了跨源响应....使用 MIME 类型文本/html。”
我不知道我做错了什么,从昨天开始我就一直卡住了。
Failed to load https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A4000%2Fauth%2Fgoogle%2Fredirect&scope=profile&client_id={clientiddeletedbyme}.apps.googleusercontent.com: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A4000%2Fauth%2Fgoogle%2Fredirect&scope=profile&client_id={iddeletedbyme}apps.googleusercontent.com with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.
这是我在我的 React 应用程序的 package.json 文件中的代码:
{
"name": "workout_tracker",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"firebase": "^5.3.0",
"jw-paginate": "^1.0.2",
"jw-react-pagination": "^1.0.7",
"normalize.css": "^8.0.0",
"random-id": "0.0.2",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-headroom": "^2.2.2",
"react-icons-kit": "^1.1.6",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"react-scripts-cssmodules": "^1.1.10",
"react-swipe-to-delete-component": "^0.3.4",
"react-swipeout": "^1.1.1",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"redux-devtools-extension": "^2.13.5"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"proxy":"http://localhost:4000"
}
这是我的 React 应用程序中将请求发送到服务器的代码:
express=()=>{
axiosInstance.get("/google").then(res=>{
console.log(res);
}).catch(err=>console.log(err));
}
这是服务器端的代码
let express = require("express");
let cors= require("cors");
let mysql = require("mysql");
const util = require("util");
const passportSetup = require("./config/passport-setup");
const passport = require("passport");
let app = express();
let connection =mysql.createConnection({
host: "localhost",
user: "root",
password: "root",
database: "Workout_Tracker",
socketPath: '/Applications/MAMP/tmp/mysql/mysql.sock'
});
app.use(cors(
{origin:"http://localhost:3000",
credentials:true,
allowHeaders:"Content-Type"
}
));
app.options("/google", cors());
app.get("/google", cors(), passport.authenticate("google",{
scope:['profile']
}));
...omitted a bunch of SQL queries
app.listen(4000, () => console.log("Listening on port 4000!"));
最佳答案
这是您需要安装的新中间件的示例代码,以表达之前您定义任何路由:
const cors = require('cors');
app.use('*', function(req, res, next) {
//replace localhost:8080 to the ip address:port of your server
res.header("Access-Control-Allow-Origin", "http://localhost:8080");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Credentials', true);
next();
});
//enable pre-flight
app.options('*', cors());
但在复制和粘贴之前,只是让您知道在导入 cors 之前需要 npm install cors --save
。上面的示例代码简单的意思是:
axios.create({
withCredentials:真
});
表示:react 和 express 都同意使用 CORS。同样在其他 http 库中。 以下是您可以查看的一些文档: https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
关于node.js - React/Node/Express 和 google OAuth 的 CORS/CORB 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52728346/
我已经使用 Jquery AJAX 调用了第三方 API。我在控制台中收到以下错误: Cross-Origin Read Blocking (CORB) blocked cross-origin re
我有一个 react webapp,它调用一个 api(使用 fetch 调用另一个 api)获取图像 url,并通过 img 标签在屏幕上呈现图像。 我遇到的问题是图像无法加载,而是在控制台中收到
我不确定为什么在尝试使用跟踪像素时会出现 CORB 错误。 我认为如果返回图像并且内容类型是图像(gif 或 jpeg),则不会发生这些错误。确切的错误是: 跨源读取阻塞 (CORB) 阻止了跨源响应
我没有收到使用 Angular 4 服务的 api 调用的响应,但在浏览器中工作的相同调用我面临以下给定错误 - 跨源读取阻止 (CORB) 阻止跨源响应 最佳答案 我在获得回复方面也遇到了类似的挑战
我有一个 corb 脚本来对 xml 文件运行节点替换。 如果我不指定集合,它会从现有集合中删除文档吗? 最佳答案 如果您使用 xdmp:node-replace() 更改文档,那么该文档将保留在它的
我知道很多人也有这个问题。但是,似乎人们正在混合使用CORB和CORS。我之前已经安装了CORS扩展程序,但似乎无法在CORB中使用。 我在前端使用聚合物 return { "Content-type
Chrome 一直工作到版本 73。现在它向我抛出 CORB 警告并阻止我的 chrome 扩展程序运行。 这是我的 ajax jquery 代码,没什么特别的 $.ajax({ url:
这个问题已经有答案了: XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header (11 个回答) 已关闭 3 年前
我正在使用下载 URL 从我的 Firebase 存储中获取 HTML 文件并将其显示在模板中。在我的模板中,我使用 与 src设置为下载地址。浏览器显示损坏的文件,控制台显示 Cross-Origi
我正在优化我的 PDF 查看器应用程序,我想为 PDF 使用链接预加载。 PDF 下载是通过 XHR 请求触发的(它只是后台的 PDF.js 库)。 我的想法是预加载 PDF,然后当加载处理 PDF
合并发生在 corb 过程中,用于添加超过 1000 万个文档的节点。 CPU/IO 达到最大导致超时。如果我停电合并,corb 过程将由于许多站而停止。我能做什么或解决问题。 我有 6 片森林。 合
当我尝试从我的 JavaScript (React) 应用程序中访问 Pixabay API 时,遇到了跨源读取阻止 (CORB)。 这是我的获取代码: fetch(`https://pixabay.
我正在尝试 JSONP。我有一个如下所示的 HTML: JSONP 我的 main.js 文件是: function showPlayers(dat
我有一个服务器端呈现的 Angular 应用程序,我在其中使用 ng2-adsense在某些路线上展示 AdSense 广告。我注意到大部分时间(并非所有时间)我的广告都没有显示,并且我在 Chrom
我尝试使用 open-graph-scraper 和 Vue.js 抓取 OG 数据,但由于 Chrome 中的 CORB 而被阻止。对于我使用 Node 运行的脚本来说,它运行良好,但是是否有解决此
我正在 React 上运行一个简单的应用程序来显示我在 https://my.pcloud.com/ 上上传的文件中的音轨使用 React-Player 组件。 但是,轨道不显示,我在控制台上收到以下
我想调试 Chrome 74 中可能由 CORB 引起的本地开发环境问题。我想看看 - 当我关闭 CORB 时 - 问题是否消失。 根据 Google developer docs比如说 You ca
我是 CORB 的新手,正在尝试使用指南: https://github.com/marklogic-community/corb2/wiki/Hello-World-from-CORB 我的 COR
所以我有一个文件 uris.xqy,它获取我想在 corb 中操作的文档 URI。 然后我有引入 $URI 的 docs.xqy 将变量 $URI 声明为 xs:string external; 然后
我想通过我的 chrome 扩展程序中的 post 调用 api,问题是无法获取响应数据。 我刚刚在控制台中收到跨源读取阻止 (CORB),但响应为空。 Cross-Origin Read Block
我是一名优秀的程序员,十分优秀!