根据规范,fetch api有各种缓存模式.("default","no-store","reload","no-cache","force-cache"和"only-if-cached")但是,不清楚每种模式的用途,或者浏览器支持的状态.
我在本地运行Flask-Restful API并从不同的端口发送包含JSON的POST请求.我收到了错误
No 'Access-Control-Allow-Origin' header is present on the requested resource.
但是,当我跑
curl --include -X OPTIONS http://localhost:5000/api/comments/3
--header Access-Control-Request-Method:POST
--header Access-Control-Request-Headers:Content-Type
--header Origin:http://localhost:8080
我明白了
HTTP/1.0 200 OK
Content-Type: text/html; charset=utf-8
Allow: HEAD, GET, POST, OPTIONS
Access-Control-Allow-Origin: http://localhost:8080
Access-Control-Allow-Methods: DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT
Vary: Origin
Access-Control-Allow-Headers: Content-Type
Content-Length: 0
其中"Access-Control-Allow-Origin"显示为"*".GET工作正常,只是POST给出了这个错误.怎么可能出错？如果相关,对于我正在使用的前端做出反应并通过axios请求.
我的FE应用程序正在使用来自不同域的API.我知道它应该触发CORS,但据我所知它不应该为每个请求创建预检.
根据文档,我不应该有预检请求的GET方法.
Cross-site requests are preflighted like this since they may have implications to
user data. In particular, a request is preflighted if:
- It uses methods other than GET, HEAD or POST.
Also, if POST is used to send request data with a Content-Type
other than application/x-www-form-urlencoded, multipart/form-data,
or text/plain, e.g. if the POST request sends an XML payload to the
server using application/xml or text/xml, then the request is preflighted.
- It sets custom …import request from 'superagent';
const self = this;
request
.post('https://github.com/login/oauth/access_token')
.set('Content-Type', 'multipart/form-data')
.query({
client_id: CLIENT_ID,
client_secret: CLIENT_SECRET,
callback: 'http://127.0.0.1:3000/callback',
code,
state,
})
.end((err, res) => {
const token = res.body.access_token;
console.log(token);
self.setToken(token);
});上面的代码会给我一个这样的错误
XMLHttpRequest无法加载 https://github.com/login/oauth/access_token?client_id=112asdecf3805fdada12& ... 127.0.0.1%3A3000%2Fcallback&code = 434ebd7bb98d9809bf6e&state = HelloWorld1234.请求的资源上不存在"Access-Control-Allow-Origin"标头.因此,不允许来源" http://127.0.0.1:3000 "访问.
我不知道为什么即使我已经使用github和回调网址注册了oauth应用程序 http://127.0.0.1:3000/callback
我正在尝试从API中获取数据.API已启用CORS支持并返回以下对OPTIONS请求的响应:
Access-Control-Request-Headers:content-type
Access-Control-Allow-Origin:*
API不允许'Content-type'任何其他内容'application/json'.
使用此限制,我试图使用fetchReact-Native方法来获取数据.
方法1(无人):
{
method: 'POST',
mode: "no-cors",
headers: {
'content-type': 'application/json'
}
使用此方法,浏览器会自动将内容类型发送为"text/plain".我假设这是因为CORS默认只允许三个标头中的一个.但是,由于服务器不支持此内容类型,因此会针对不支持的内容类型返回错误.
方法2(与cors或没有任何东西):
{
method: 'POST',
mode: "cors", // or without this line
redirect: 'follow',
headers: {
'content-type': 'application/json'
}
}
...
.then(response => console.log(response))
在这种情况下,使用Chrome的F12网络工具,我可以看到服务器返回数据:对服务器的第一个请求是fetchfor OPTIONS.为此,服务器回复一个空对象以及上面的标题集.下一个调用是实际的POST API调用,服务器使用包含一些数据的正确JSON响应向其响应.但是,通过我的代码进入控制台的响应是{}.我假设这是因为react的fetchAPI返回了OPTIONS调用的响应而不是实际的POST调用.
有没有办法忽略OPTIONS请求的响应并获得then处理后续请求响应的方法？
XMLHttpRequest无法加载http://192.168.1.253:8080/ ...请求的资源上没有"Access-Control-Allow-Origin"标头.因此不允许来源' http:// localhost:4200 '访问.响应具有HTTP状态代码401.
很常见的错误,有很多可能的解决方案没有奏效.我理解(我认为)CORS应该如何工作,我没有看到我的HTTP标头有什么问题,但它仍然不起作用
来自Chrome:
Request URL:http://192.168.1.253:8080/...
Request Method:OPTIONS
Status Code:200 OK
Remote Address:192.168.1.253:8080
Referrer Policy:no-referrer-when-downgrade
Response Headers
Access-Control-Allow-Headers:x-requested-with,accept,content-
type,authorization
Access-Control-Allow-Methods:POST, GET, PUT, PATCH, OPTIONS, DELETE
Access-Control-Allow-Origin:*
Access-Control-Max-Age:3600
Allow:GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH
Cache-Control:no-cache, no-store, max-age=0, must-revalidate
Connection:keep-alive
Content-Length:0
Date:Mon, 15 May 2017 21:50:55 GMT
Expires:0
Pragma:no-cache
Server:...
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-XSS-Protection:1; mode=block
Request Headers
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:authorization,content-type
Access-Control-Request-Method:GET
Cache-Control:no-cache
Connection:keep-alive
Host:192.168.1.253:8080
Origin:http://localhost:4200
Pragma:no-cache
Referer:http://localhost:4200/...
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 …我从 chrome 的控制台收到这个错误日志
XMLHttpRequest 无法加载https://subgroup.domain.com/socket.io/?EIO=3&transport=polling&t=Lpgp_mu。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问Origin ' http://localhost:3000 '。响应的 HTTP 状态代码为 500。
我正在使用 Node.js、socket.io 在我的节点和 react.js 之间进行通信，使用 digitalocean 的 droplet 使用 nginx 来托管它们。
我已经阅读了很多关于 CORS 错误的信息，但我不确定在哪里修复错误。我一直试图在我的 NGINX 中允许它们
location /server {
proxy_pass http://localhost:8080;
proxy_http_version 1.1;
proxy_set_header Access-Control-Allow-Origin *;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
从我的 node.js，服务器端：
var express = require("express");
var app = express();
var http = require("http");
var port = 8080;
var io = require("socket.io").listen(app.listen(port));
app.use("/", function (req, res, next) {
res.status(200).send("Online …我的应用在这里加载视频:https://core.arc.io/guanzo/VideoOfPeopleWalking.mp4
它使用Range请求标头以16Kb的块加载来自另一个来源的视频.我的服务器已将响应标头设置Access-Control-Max-Age
为10分钟,以防止出现多余的OPTIONS请求.
访问链接(它是一个HTML页面),打开网络工具,并观察获取16Kb块需要大约1秒.
现在选中"禁用缓存",您应该看到请求更快完成LOT,看起来有更多的并发请求.这与预期行为相反,因为每个请求都必须触发并等待OPTIONS请求.
如果启用了缓存,请求应该更快,不是吗？这里发生了什么？
以下是GIF格式的复制品:https://i.gyazo.com/ec5941829031cdd4dc684a3b53ec6c39.mp4
注意:块存储在IndexedDB中,因此如果刷新页面,则需要清除IndexedDB以强制触发所有请求.
编辑:筛选出任何firestore请求,我不确定为什么这些请求被解雇,但它应该与我的问题无关.
编辑:一个新的线索!https://i.gyazo.com/bd887533a42868f748564ccda4451881.png
选中"禁用缓存"后,Chrome将重复使用"连接ID"列中显示的相同TCP连接.表面上看,这应该可以更快地提出请求.
In order to keep the uploaded media (S3 objects) private for all the clients on my multi-tenant system I implemented a Cloudfront CDN deployment and configured it (and its Origin S3 Bucket) to force the use of signed URLs in order to GET any of the objects.
First, the user is authenticated via my system, and then a signed URL is generated and returned to them using the AWS.CloudFront.Signer.getSignedUrl() method provided by the AWS JS SDK …
amazon-s3 amazon-web-services amazon-cloudfront pre-signed-url
我正在使用 vite.js 的 React 开发 Mern Stack Web 应用程序，并且在处理代理时遇到问题。
我的客户端运行在http://localhost:3000，服务器端运行在http://localhost:5000。
通常我使用 http-proxy-midlleware 来连接我的服务器和客户端，如下所示
src/setupProxy.jsx
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app){
app.use(
createProxyMiddleware('/api', {
target: 'http://localhost:5000',
changeOrigin: true
})
)
};
但是，当我使用 axios 将数据发布到服务器时，它不起作用，仍然发送到 localhost:3000。我用谷歌搜索了一下，发现使用 vite.js 我需要使用 vite.config.js
所以我设置了 vite.config.js 如下
从'vite'导入{defineConfig，HttpProxy}从'@vitejs/plugin-react'导入反应
export default defineConfig({
plugins: [react()],
server: {
host: true,
port : 3000,
proxy: {
'/api': {
target: 'http://localhost:5000',
changeOrigin: true
}
}
},
})
并再次尝试 axios 调用。
const result = …