小编sid*_*ker的帖子

在客户端浏览器中使用 fetch api，我没有遇到 GET 或 POST 问题，但是我遇到了 fetch 和 DELETE 问题。它似乎将 DELETE 请求方法更改为 OPTIONS。

大多数研究表明是 cors 问题，但对我来说，我已经涵盖了 cors 问题。

我不确定这是否是有效的 fetch spec api 链接，但它显示：

上市方法的CORS安全是一个方法GET，HEAD或POST。

我不确定这是否意味着我不能在使用 cors 获取时使用 DELETE，这就是我遇到问题的原因？

浏览器代码：

var request =
          new Request(url, {
            credentials: 'include',
            mode: 'cors',
            method: 'DELETE'
          });

        return fetch(request)
          .then(this.fetchError.bind(this))
          .then(this.json)
          .then((response)=> {
            this.set(`uploadState.${index}.value`, false);
          })
          .catch((e) => {
            console.log(e);
          });
      },

chrome 网络标签：

Request URL:http://72.12.4.3:9000/api/v1/listings/3/47/image-3-47-1492565415145.jpeg
Request Method:OPTIONS
Status Code:401 Unauthorized
Remote Address:72.12.4.3:9000

Response Headers
view …

我正在Angular 2和Laravel 5.4中构建我的应用程序.Angular2用于客户端,laravel 5.4用于服务器端.我在laravel中创建了API并从Angular2请求了这些API.

在Laravel中,我配置了Oauth 2护照服务,该服务正在验证所有API.在每个API调用中,我发送到标题下方.

'内容类型','授权'

我如何用标题调用API的方式.

private headers = new Headers({'Content-Type': 'application/json', 'Authorization': 'Bearer ' + localStorage.getItem('access_token') });


let body = JSON.stringify({ user_id, company_id });
            console.log(this.headers);
            this.http.post(this.BuyerCostSetting, body, {headers:this.headers} )
            .subscribe(
                response => {
                    console.log('here');
                    console.log(response);                  
                },
                error => {
                    console.log(error.text());
                }
            );

当我从Angular2点击此API时,它显示以下错误:

Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response

我对微软登录进行HTTP POST请求以获取与邮件API一起使用的访问令牌,请求成功但代码转到我的代码的错误子句.

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('Accept', 'application/json');
  var requestoptions = new RequestOptions({
    headers: headers
  });
  var body = `grant_type=authorization_code&
              redirect_uri=http://localhost:4200&
              code=`+ code + `&
              client_id=4e[................]5ab&
              client_secret=CE[..............]BC`;

  this.http.post("https://login.microsoftonline.com/common/oauth2/v2.0/token", body, requestoptions).map((res: Response) =>
  {
    console.log("response given");
    const data = res.json();
  }).subscribe( (data) => {
     console.log("The data is = " + data); 
  }, error => { 
    console.log("The error is = " + error)
  });
}

浏览器控制台显示:XMLHttpRequest无法加载https://login.microsoftonline.com/common/oauth2/v2.0/token.请求的资源上不存在"Access-Control-Allow-Origin"标头.因此不允许来源' http:// localhost:4200 …

我至少 90% 确信以下内容是 Chrome 实施W3C 的 CSP 标准的结果的结果，但我认为最好加倍努力并确定。

我目前正在为客户实施严格的内容安全策略，并且在 Chrome 66 上遇到了以下策略指令复杂情况：

Unrecognized Content-Security-Policy directive \'disown-opener\'.\nUnrecognized Content-Security-Policy directive \'reflected-xss\'.\nUnrecognized Content-Security-Policy directive \'referrer\'.\n

再次，我确信这是一个标准问题（因为我正在使用MDN\xe2\x80\x99s CSP 文档）。如果是这种情况，任何人都可以指导我竞争或替代指令吗？

我有一个简单的 Firebase 函数，如下所示。当通过 javascript (CORS) 访问时，该函数的飞行前选项的请求（CORS 标准的一部分）将返回 302 重定向到以以下内容开头的 url

https://accounts.google.com/ServiceLogin?service=ah&passive=true&continue=https://appengine.google.com/_ah/conflogin%3Fcontinue%3D

并以我的函数的 URL 结尾。这是有问题的整个函数：

import * as functions from 'firebase-functions';
import * as express from 'express';
import * as cors from 'cors';

const app = express();

app.use(cors({ origin: true }));

app.post('*', async (req, res) => {
  res.setHeader('X-Test', 'OK');
  res.setHeader('Set-Cookie', ['__session=ninja']);
  res.send('OK');
});

app.get('*', async (req, res) => {
  res.setHeader('X-Test', 'OK');
  res.setHeader('Set-Cookie', ['__session=ninja']);
  res.send('OK');
});

export const testing = functions.https.onRequest(app);

正如您所看到的，该函数不包含任何重定向逻辑。如果我手动导航到浏览器（第一个）中的重定向链接accounts.google.com，它会显示某种 Google Compute Engine 安全页面，要求访问我的 Google 帐户。最近，当我通过 javascript 访问它们时，之前工作的所有函数都开始使用此 …

我想调试 Chrome 74 中可能由 CORB 引起的本地开发环境问题。我想看看当我关闭 CORB 时问题是否会消失。

据谷歌开发者文档称

您可以通过使用以下命令行标志启动 Chrome 来暂时禁用 CORB，以确认问题是否由 CORB 引起： --disable-features=CrossSiteDocumentBlockingAlways,CrossSiteDocumentBlockingIfIsolating

但是，如果我跑

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-features=CrossSiteDocumentBlockingAlways,CrossSiteDocumentBlockingIfIsolating --user-data-dir="C:/ChromeDevSession"

Chrome 仍然显示 CORB 警告并根据请求进行阻止。

我正在使用 Netlify 来提供一些静态.json文件。它们在浏览器中加载良好，但是当我尝试通过 javascript 获取它们时，我在控制台中收到以下错误：

从源“http://localhost:3000”获取（重定向自）的访问已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

我在 Netlify 仪表板中检查了我网站设置中的所有选项，但没有看到任何启用 CORS 的选项，怎么做？

Authorization当遵循同源 301 重定向时，Safari 似乎会删除标头。例如这段JS代码：

fetch("/api/endpoint-that-redirects", { headers: new Headers({ "Authorization": "sometoken" })})

将触发一个带有header 的GET事件，该 header 会响应一个Location 。浏览器会自动遵循此操作，这意味着它会再次 GET 到，但这次没有标头。/api/endpoint-that-redirectsAuthorization301/api/endpoint/api/endpointAuthorization