为什么我的跨域POST请求被OPTIONS请求预检？
跨域POST请求被OPTIONS请求预检的原因是浏览器的同源策略限制。同源策略是一种安全机制，它要求浏览器限制在不同源（协议、域名、端口）之间的资源访问，以防止恶意的跨站点脚本攻击。
当浏览器发现跨域的POST请求时，会先发送一个OPTIONS请求进行预检（Preflight），以确认服务器是否允许该跨域请求。OPTIONS请求包含一些预检请求头，如Origin（请求来源）、Access-Control-Request-Method（请求方法）、Access-Control-Request-Headers（请求头），用于告知服务器实际请求的细节。
服务器收到OPTIONS请求后，需要进行相应的处理。如果服务器允许该跨域请求，会在响应中添加一些跨域相关的响应头，如Access-Control-Allow-Origin（允许的请求来源）、Access-Control-Allow-Methods（允许的请求方法）、Access-Control-Allow-Headers（允许的请求头），并返回状态码200。浏览器收到服务器的响应后，会根据响应头判断是否允许该跨域请求，如果允许，则发送实际的POST请求。
如果服务器不允许该跨域请求，或者没有正确处理OPTIONS请求，浏览器会拦截实际的POST请求，阻止跨域访问。
解决跨域POST请求被OPTIONS请求预检的方法有多种，以下是一些常见的解决方案：
- 在服务器端配置CORS（跨域资源共享）：通过在服务器端设置响应头，允许特定的跨域请求。具体配置方法可以参考腾讯云CORS相关文档：CORS 配置
- 使用代理服务器：在同源策略允许的情况下，通过在同域下的代理服务器转发请求，实现跨域访问。
- JSONP（仅限GET请求）：利用script标签的src属性不受同源策略限制的特性，通过动态创建script标签，将POST请求转换为GET请求，并在响应中返回执行的回调函数。
- WebSocket：使用WebSocket协议进行跨域通信，WebSocket不受同源策略限制。
以上是一些常见的解决方案，具体选择哪种方法取决于实际需求和场景。
相关·内容
fetch(BaseURL + type, {
method: 'GET',
headers: {
'Authorization': 'Bearer' + token
}
}
当我使用GET方法时，它将方法更改为OPTIONS。在Safari上运行得很好。有时，当我刷新页面时，它会显示GET方法，但大多数时候它会显示OPTIONS 200ok状态，并且不返回数据。
浏览 60提问于2018-05-30得票数 0
1回答
为什么我的NodeJS应用每次都会触发两个requests？我不确定为什么这个选项每次都会被触发，而我实际上只是在调用HTTP方法=> [GET, POST, PUT, DELETE]
OPTIONS /api/v1/admin/user/55e1d606803478cc1edacfa0 200 0.149 ms - -
DELETE /api/v1/admin/user/55e1d606803478cc1edacfa0 200 7.598 ms - 58
下面是我调用选项的代码。
app.all('/*', function(req, res, next){
r
浏览 0提问于2015-08-30得票数 0
由于某些原因，每当我使用YUI进行异步请求并将其指定为GET或POST，而请求是HTTPS时，实际的请求都会使用OPTIONS请求方法。
帮助!它为什么要这么做？
另外，我用Prototype试了一下，得到了同样的结果。
浏览 2提问于2010-06-30得票数 2
回答已采纳
今天我发现了XMLHttpRequest的一个奇怪的行为。当我调用GET服务时，我发现如果我没有设置Authorization头，来自firefox的请求是相同的。但是如果我添加了"Authorization“头，firefox首先发送一个带有"OPTIONS”的请求，然后发送一个"GET“请求。
我知道动词“选项”必须在服务器端处理，但我只是想知道为什么XMLHttpRequest会这样。虽然这是一个跨域的请求，但为什么浏览器首先发送"OPTIONS“请求。为什么添加"Authorization“标头会改变行为。
这是我的Javascript代码和Fi
浏览 11提问于2014-03-15得票数 11
回答已采纳
1回答
使用XHR的基本身份验证
、、、
我正在尝试从需要基本身份验证的服务器获取一些响应。所以当我使用curl时：
curl -u user:pass http://myserver.com/get/send-my-data
它给了我正确的回答。但是当我使用jquery AJAX创建XHR请求时。我有403错误。下面是我的AJAX设置：
$.ajax ({
type: 'GET',
url: 'http://myserver.com/get/send-my-data',
beforeSend: functi
浏览 0提问于2012-10-12得票数 2
回答已采纳
1回答
通过使用redux-saga发送post请求，我有以下代码：
import {put, call, fork, takeEvery} from 'redux-saga/effects';
import fetch from 'isomorphic-fetch';
const url = 'xxx/api/posts';
function* addPost(data) {
try{
const response = yield fetch(url, {
method: 'POST'
浏览 2提问于2017-04-03得票数 1
//individual logins
$rootScope.setting.instances.forEach(function(ins) {
var header = {
"Accept": "application/json",
"Authorization": "Basic " + btoa( ins.uname + ':' + ins.pword ),
浏览 0提问于2015-12-04得票数 0
我的SAP应用程序有一个奇怪的问题，一旦我修改了头文件，每个请求就会变成两次，如下所示
我的结构由restful API和SAP应用程序组成，我想修改头部的原因是要放置一个从restful API发出的令牌。restful API被配置为允许其他域调用，我知道CORS会发送一个“预检”请求来获取一些信息，但是为什么我不能在不修改头部的情况下捕获重复请求，一旦应用了头部修改，重复请求就出现了。
这就是我在控制器中修改头文件的方式。
$http.defaults.headers.common['x2-token'] = _TOKEN;
有谁有主意或线索吗？非常感谢。
浏览 0提问于2017-06-13得票数 0
我正在使用这里记录的Pons dictionary API：当我在mac终端中使用get请求时，它可以工作，但当在浏览器中测试它时，在我的javascript文件(如下所示)中使用XMLHttpRequest时就不起作用了。它总是给我一个404错误，然后声明“CORS策略阻止了从源'null‘在'’对XMLHttpRequest的访问:对印前检查请求的响应没有通过访问控制检查:它没有HTTP ok状态。”
有什么想法吗？
我尝试发出一个不需要我的X-Secret (凭证)的请求，它起作用了，但是一旦我设置了X-Secret头，它就抛出了一个404错误。我需要为大多数请求类型设置
浏览 20提问于2019-08-15得票数 0
我在一个域上加载我的脚本，并使用POST和Ext.Ajax.request()向同一个域发送一些数据。
不知何故，dev-tools告诉我，有一个失败的OPTIONS请求。
Request URL : myurl-internal.com:8090/some/rest/api.php
Request Headers
Access-Control-Request-Headers : origin, x-requested-with, content-type
Access-Control-Request-Method : POST
Origin
浏览 2提问于2012-09-04得票数 8
回答已采纳
进行应用编程接口调用时，AngularJS(2/4)出现问题。每个API请求都有JWT Auth令牌头，这使得API复制，其中第一个请求不返回响应(但200 statusCode)，而第二个请求返回实际数据。
浏览 14提问于2017-06-28得票数 0
1回答
我正在使用'fetch‘对我的节点服务器进行post调用。我正试着点击一个按钮就能做到这一点。
当我单击该按钮时，会发送一个OPTIONS请求，但浏览器不会发送后续的POST调用。
在多次点击时，浏览器会不断发送Options请求，并且在多次尝试中只有一次会发出Post请求。
let data = {name: "Butternut cucumberpatch", age: 26}
let headers = new Headers()
headers.append("Content-type", "application/json")
浏览 1提问于2018-07-19得票数 0
所以我得到了这个代码：
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
浏览 1提问于2014-03-08得票数 0
我尝试在REST中完成web服务的html+javascript部分。以下面的代码为例：
<!DOCTYPE html>
<html lang="en"
<script type="text/javascript">
function testPut( url ){
var xhr = new XMLHttpRequest();
xhr.open( 'PUT', url, false );
xhr.setRequestHeader( 'Content-Type', 'tex
浏览 0提问于2013-05-15得票数 2
回答已采纳
我在本地有angular 4项目，我想使用api来获取信息，我得到了这个错误
localhost/:1 XMLHttpRequest cannot load http:????. Response for preflight is invalid (redirect)
我在本地有一个jquery项目，它调用相同的api并得到正确的结果
问题出在哪里？我在这个网站上看到了很多问题和答案，没有人能帮助我。
浏览 0提问于2017-06-13得票数 2
2回答
如何使用CORS？
、、、
"正在尝试在使用Express.js Web框架的Node.js应用程序中支持CORS。首先，这样做（代码是用CoffeeScript语法编写的）：
app.options ""*"", (req, res) ->
res.header 'Access-Control-Allow-Origin', '*'
res.header 'Access-Control-Allow-Credentials', true
# try: 'POST, GET, PUT, DELETE, OPTI
浏览 394提问于2017-12-14
我正在创建一个简单的网页，我使用Angular作为客户端，spring boot作为服务器。首先，我使用本地主机进行了测试，我的angular应用程序的示例： 这是我与java服务器通信的service.ts： url="http//localhost/demo";
login(u:user){
return this.http.post<user>(this.url+'/login',u);
} 上面的代码工作正常，ok当我尝试使用分配给服务器的域名在生产中使用这个应用程序时，问题就开始了。 url="http//domain/de
浏览 23提问于2021-01-16得票数 0
3回答
我正在尝试从具有oAuth身份验证的API中获取数据。我正在做的是从server1 (我的Angular应用程序所在的地方)向server2发送身份验证请求，然后我就得到了访问令牌。然后，我将令牌放入JS变量中，并尝试访问API端点。
我的js代码看起来像这样：
let headers = new Headers({ 'Authorization': "Bearer " + oAuthAccessToken });
let options = new RequestOptions({ headers: headers });
let url = "htt
浏览 0提问于2016-04-12得票数 0
我正在尝试使用以下命令调用API
createAuthorizationHeader(headers: Headers) {
headers.append('Authorization',
'Bearer ' + JSON.stringify(JSON.parse(localStorage.getItem('access_token')).access_token));}
getAllData() {
let headers = new Headers();
this.createAuthorizationHeader(
浏览 1提问于2017-03-24得票数 0
2回答
我向microsoft登录名发出HTTP POST请求，以获取用于邮件API的访问令牌，请求成功，但代码转到代码的error子句。
requestAccessToken(code: string)
{
console.log("request access token");
if (code) {
var headers = new Headers();
headers.append("Content-Type", 'application/x-www-form-urlencoded');
headers.append('Ac
浏览 0提问于2017-05-26得票数 9
回答已采纳
这是我的angularJs请求：
url = root + "/products";
$http.post(url, params)
.then(function(response) {
console.log('Successfull...');
});
这是我在python tornado中的服务器端头：
self.set_header("Access-Control-Allow-Origin", "*")
self.set_header("Access-Control-Allow-Headers&
浏览 0提问于2017-12-04得票数 0
我从我的项目调用不同的api没有问题，有另一个api从第三方运行在亚马逊上，每当我试图调用它时，我得到网络错误。 我还尝试使用不同的请求头设置、不同的长度(从邮递员处获取)来调用api，也删除了Content- length，但都不起作用。 当我从邮递员调用时，它可以正常工作，但我不能从我的React.js PWA项目中调用它。 任何建议都将不胜感激。 const requestOptions = {
method: "POST",
headers: {
"Content-Type": "ap
浏览 79提问于2020-04-24得票数 1
回答已采纳
1回答
我从与GET发送位置不同的服务器上检索图像文件，我得到两个文件，一个位于/var/www/html/test/image1.png的另一个服务器上，另一个位于/var/www/html/test/inside/image2.png上。我得到的文件如下所示。我知道url、和，然后我这样做。
function convertToDataURLviaCanvasBOTH(url, callback, outputFormat){
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function(){
浏览 2提问于2015-12-07得票数 0
我刚刚了解了Access-Control-Allow-Methods报头，例如
Access-Control-Allow-Methods: OPTIONS, HEAD, GET
我从来没有使用过这个头文件(只有Access-Control-Allow-Origin)，但我曾经让CORS工作过。
是否默认允许所有方法，或者我是否幸运地处理了未定义的行为？
浏览 1提问于2013-12-10得票数 45
回答已采纳
我尝试使用仅限应用程序身份验证调用twitter search API
但我无法获得文档后面的不记名令牌：
let urlAuth = 'https://api.twitter.com/oauth2/token';
let apiKey = encodeURIComponent('xxx');
let apiKeySecret = encodeURIComponent('xxx');
let encoded = btoa(apiKey + ':' + apiKeySecret);
let body = 'grant_typ
浏览 0提问于2016-10-19得票数 3
2回答
我正在使用curl调用我的一个API，如下所示(跨域)。
curl -H "Origin: foo.com" -H "Content-Type: application/json" -H "Authorization: Basic YWRtaW46YWRtaW4=" -v https://localhost:9443/api/v10/configs -k
我没有在服务端设置必要的跨域头部。但是API调用是有效的。为什么会这样呢？
在服务器端API类中，在options调用中，我只设置了Allow头。
@OPTIONS
public Re
浏览 1提问于2015-11-25得票数 3
2回答
我已经通过CherryPy (Python web框架)公开了一个简单的RESTful JSON url。我有第二个应用程序(使用塔架)，它需要到达一个由CherryPy公开的网址。两者都是通过localhost提供服务的。当直接使用浏览器时，这两个URL都能很好地解析。
但是，当从初始Pylons请求运行的DOJO脚本从CherryPy调用JSON url时，它会失败。我在Firefox中打开LiveHeaders，发现DOJO首先发送了一个HTTP "OPTIONS“请求。CherryPy使用不允许的405方法拒绝OPTIONS请求，然后它会全部停止。
如果我将相同的页面放入Che
浏览 1提问于2010-11-05得票数 1
2回答
我正在查看问题，其中有一个指向的链接，其中包含以下代码：
var fd = new FormData();
fd.append("image", file); // Append the file
fd.append("key", "6528448c258cff474ca9701c5bab6927");
// Get your own key: http://api.imgur.com/
// Create the XHR (Cross-Domain XHR FTW!!!)
var xhr = new XMLHttpRequest();
xhr
浏览 3提问于2012-01-08得票数 6
回答已采纳
1回答
我从使用sinatra构建的api调用服务，并且我进行了一个简单的ajax调用，如下所述：
<script>
$(document).ready(function (){
seeStatus()
});
function seeStatus(){
token = $('#token').val();
$.ajax({
url: '/see/v1/status/' + token,
type: 'GET',
浏览 0提问于2018-03-08得票数 0
我在我的应用程序中使用ember-data，然而，我意识到Ember data会向服务器发出两个分离的请求(例如GET和OPTIONS)，这当然比发出单个请求需要更长的时间。
如下截图所示，OPTIONS请求需要1秒才能完成，每个用户操作总共需要2秒。
下面的代码片段是我用来在一个特定的路径中获取模型的代码片段。
model() {
return this.store.findAll('card');
},
我的问题是，为什么它会提出两个请求？这是发出OPTIONS请求所必需的吗？如果不是，我如何才能停止让我的Ember data发出OPTIONS请求？
浏览 35提问于2017-02-08得票数 1
回答已采纳
在我之前的帖子中，我试图用post方法从angular到spring mvc发送一个带有列表的JSON。现在它工作得很好！控制器：
@RequestMapping(value="/create/", method=RequestMethod.POST)
@ResponseBody
public StatusResponse create(@RequestBody EventsDTO events) throws TechnicalException {
return new StatusResponse();
}
角度：
var _queryPost = function(u
浏览 0提问于2015-11-23得票数 0
我正在尝试在我的亚马逊服务器上实现Spika网络聊天()。我的网站代码在一个服务器实例上，Spika聊天服务器在另一个服务器实例上。Spika聊天服务器已启动并运行。现在，当我试图在我的网站上与服务器交互时，我得到了这个错误：
XMLHttpRequest cannot load http://example.com:8000/spika/v1/user/list/Boom?_=1468157726669.
Request header field access-token is not allowed by Access-Control-Allow-Headers
in preflight
浏览 1提问于2016-07-10得票数 0
我创建了从SxcApiController继承的自定义webapi，但当我尝试从不同的域使用此api时，我收到消息：
No 'Access-Control-Allow-Origin' header is present on the requested resource.
我在我的控制器方法中有这个属性：
[HttpPost]
[DnnModuleAuthorize(AccessLevel = SecurityAccessLevel.Anonymous)]
我这样调用我的方法：
$.ajax({
url: apiurl,
type
浏览 0提问于2018-09-23得票数 0
3回答
我的微服务是使用spring-boot和spring security开发的，前端是在react-hooks上设计的。现在，当我使用axios.post方法向微服务发送一些数据时，它会发送CORS预检方法，即options方法，因为axios默认将content-type作为应用程序/json发送，而application.json会在任何其他请求之前将options请求发送到服务器。 我试着用不同的头和内容类型'application/x-www-form-urlencoded‘发送我的请求，我也在我的服务器端使用了@cross-origin(*)。 const config =
浏览 30提问于2019-08-27得票数 2
回答已采纳
编辑:每当我尝试从安装在虚拟机中的Orion上的orion context broker获取数据时，我都会得到以下错误。我使用的查询：
$.ajax({
url: "http://a.b.c.d:1234/ngsi10/contextEntities/entity_name",
headers: {
'X-Auth-Token' : "Sabcdekdnbhhjh",
'Accept' : "application/json; charset=utf-8"
浏览 2提问于2015-06-05得票数 1
我在我的应用程序中使用令牌身份验证来访问magento API。我在postman中做了以下设置，它工作得很好：
然而，使用HTTP，我总是得到一个400错误，因为它似乎不支持jQuery verb选项的印前检查(我有一个CORS配置的nginx)。我试过了：
$.ajax({
method: "POST",
url: `myip/index.php/rest/V1/integration/admin/token`,
data: {username: 'ember-app', password: 'ember-app2'},
}
浏览 3提问于2016-07-13得票数 1
我正在使用一个拦截器，以便向发送到后端的每个请求添加一个JWT令牌，如所述的。我在app.module.ts文件中包含拦截器的方式是
providers: [
...
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
]
当我检查浏览器上的网络选项卡时，我看到了一个额外的OPTIONS请求，而不是我最初发送的GET请求。
如果我不使用拦截器，则不会发送OPTIONS请求。为什么会发生这种情况，我是否可以保留拦截器，但可以去掉附加的OPTIONS请求？
浏览 10提问于2022-05-27得票数 1
回答已采纳
我想在我的请求报头中发送API密钥。我像这样使用fetch方法(我在shopify模块中使用react和它)：
fetch("https://shopify.mysite.fr/shopify/articles/1", {
method: "GET",
mode: "cors",
headers: {
"Content-Type": "application/json",
"x-auth-token":"$2y$13$Kf0P46IM19qsdqk78SuB6Ce
浏览 0提问于2019-12-11得票数 1
正在使用的服务器是Apache，它配置为基本身份验证
<LocationMatch "^/login/(.*)$">
AllowMethods POST OPTIONS
<LimitExcept OPTIONS>
Require valid-user
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Headers "
浏览 39提问于2018-01-09得票数 2
回答已采纳
我正在用Angular 5构建PWA，在重复执行PUT请求时遇到了问题。我也在运行POST和GET请求，但这个bug只在PUT中出现。
这就是方法
put(url: string, data: string): Observable<any> {
console.log('put');
const options = {
headers: new HttpHeaders({
'Content-Type': 'text/xml'
})
};
return this.http
.put(
浏览 0提问于2018-05-22得票数 1
很多小时以来我一直在努力解决这个问题..。:-(
我的“角”应用程序向同一主机(apache)上的一个简单的$http服务(Apache)发出一个 get 请求，以获得一个人员列表。我得到的结果是一个选项请求(？)，它得到405个响应.但是为什么在起飞前有一个选择？
以下是我设置的详细信息：
Grunt配置Gruntfile.js
grunt.initConfig({
...
connect: {
options: {
port: 9000,
hostname: '0.0.0.0',
livereload: 35729
浏览 3提问于2015-01-30得票数 0
回答已采纳
1回答
我有一个ASP.NET WebAPI客户端，它具有以下配置，允许任何跨域POST和GET调用：
public static void Register(HttpConfiguration config)
{
config.EnableCors(new EnableCorsAttribute("*", "*", "GET,POST"));
// other unrelated configurations
}
我对我的WebAPI应用程序进行了AJAX调用，所有这些调用都在控制台中的CORS预防消息中失败。
以下AJAX请求失败：
浏览 0提问于2015-10-27得票数 3
回答已采纳
我有一个标题的问题-如果密码是空的，它应该是这样的吗？还有另一种方法，因为那对我不起作用。
非常感谢
constructor(private http: HttpClient) {
}
getUsers() {
const headers = new HttpHeaders();
headers.set('Authorization', 'Basic ' + btoa('Usermame' + ':' + ''));
this.http.get(this.url, { headers }
浏览 0提问于2019-04-23得票数 0
我对dojo.request使用了与相同的代码，除了URL地址和调用服务的iteminfo而不是layer的addFeatures。但是，我总是得到以下错误：
Unable to load http://foobar.com/arcgis/rest/services/MapServer/info/iteminfo status: 0
我在Firefox和IE中确认了这一点。Firebug或Visual Studio显示的状态始终为0，即使Fiddler中显示的状态为200。当我弄乱了一些东西，在Fiddler中得到401时，它也会显示0。
所以，下面是我的代码：
var promise = r
浏览 1提问于2016-01-06得票数 1
3回答
印前检查响应不成功，标头正确
、、、、
我有问题，让我的离子应用程序发布到我的API。在我的api上，我设置了以下标头：
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Content-Type");
header("Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS");
当从Postman或实际网站发帖时，一切正常，我看到这些头文件返回，但一旦我打开我的应用程序并发送请求，它就不再起作用。
GET请求工作正常
浏览 209提问于2018-06-09得票数 3
回答已采纳
问题：
CORS正在处理方法参数中没有@AuthenticatedPrincipal的GET请求。
我在用
作为我的认证服务器。
弹簧休息控制器
春季数据(CrudRepository)
由于某些原因，每次我都会收到这个错误，我正在发出一个带有@AuthenticatedPrincipal参数的POST、PUT或不安全请求，但是它适用于GET请求：
我已经阅读了关于使用Spring的CORS设置的每一个可能的堆栈溢出问题，并且像这样配置了我的CORS，但是没有用：
@Configuration
@EnableWebSecurity
@EnableGlobalMethodS
浏览 4提问于2020-10-31得票数 2
1回答
我正在尝试从Angular访问一个API端点，以获取JSON数据。我的代码如下：
import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { HttpHeaders} from '@angular/common/http';
@Component({
selector: 'app-api-caller',
templateUrl: './api-caller
浏览 1提问于2018-03-15得票数 1
我有一个spring boot + spring安全应用程序，其中我允许对该应用程序进行CORS (跨域)调用。
我定义了下面的spring安全配置，
http
.authorizeRequests()
.antMatchers( "/transaction/**").hasRole(SOME_ROLES)
.antMatchers( "/", "/anonymous/pay").permitAll()
.anyRequest(
浏览 0提问于2019-01-15得票数 0
出于某种原因：
return jquery.ajax('my url', {
crossDomain : true
, data : JSON.stringify({"brand": self.current})
, type : 'POST'
}).success(function(data){
scope.results = data;
});
和/或这一点：
curl -X POST -H "Content-Type: application/json" -d '{"brand
浏览 3提问于2015-04-20得票数 1
我试图发出一个需要身份验证的get请求，但它没有发出GET请求，因为我在chrome的网络选项卡中看到它发出了一个OPTIONS请求，因此得到了404错误？
$http.defaults.headers.common['Authorization'] = 'Basic ' + _this.auth_token;
$http.get('http://localhost:2337/getFeedbackForm/abcd?format=json')
.success(function (data, status
浏览 1提问于2018-12-16得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
