我的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 …

我正在尝试从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处理后续请求响应的方法？

从http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers我得到以下代码:

var insertedNodes = [];
var observer = new WebKitMutationObserver(function(mutations) {
 alert('run');
 mutations.forEach(function(mutation) {
   for (var i = 0; i < mutation.addedNodes.length; i++)
     insertedNodes.push(mutation.addedNodes[i]);
 })
});
observer.observe(document, { childList: true });
console.log(insertedNodes);

var divElement = document.createElement('div');
divElement.innerHTML = 'div element';
document.querySelector('body').appendChild(divElement);

jsFiddle:http://jsfiddle.net/cUNH9

如您所见,我们应该看到一个警报,因为div元素已插入DOM.但看起来MutationObserver代码不会运行.如何成功运行MutationObserver代码？

所以我为我的网络应用程序实现了CSP,它在Chrome中运行得非常好.nonce执行所有内联脚本; 那些没有它的人没有被执行.

但是在Safari中,这是我在控制台中看到的消息:

内容安全策略指令'script-src'的源列表包含无效源:''nonce-fbe23fb21d40c38e8df7c0a16357dd3ec4be86ca233cb41206ac5f897cf9a103''.它会被忽略.

标题:

Content-Security-Policy script-src 'nonce-cb28e5c8a2b833169bb8d1fa686f659fed9b3bf8ea52b86916bcaf20a04b3209' 'self'

没有内联脚本被执行,即使是nonce.

我在远程服务器中托管的Laravel 5.1中创建了一个REST api.现在,我'试图从其他网站(我在本地)使用该API.

在Laravel中,我设置了发送CORS头所需的行.我还使用Postman测试了API,一切似乎都没问题!

在前端

然后,在网站上我使用ajax发送了POST请求,代码如下:

var url="http://xxx.xxx.xxx.xxx/apiLocation";
var data=$("#my-form").serialize();
    $.ajax({
                    type: "POST",
                    url: url,
                    data: data,
                    headers: { 'token': 'someAPItoken that I need to send'},
                    success: function(data) {
                        console.log(data);
                    },
                    dataType: "json",
                }); 

买然后我在控制台中收到此错误:

XMLHttpRequest无法加载http://xxx.xxx.xxx.xxx/apiLocation.对预检请求的响应未通过访问控制检查:请求的资源上不存在"Access-Control-Allow-Origin"标头.原产地" :HTTP //本地主机,因此"是不允许访问.

在后端

在API中我设置了这个(使用Laravel Middleware来设置标题):

return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');

所以,我很困惑究竟问题出在哪里.

1. 在服务器？但那么为什么Postman工作正常呢？
2. 是在Ajax调用？那么,我应该添加什么？

我正在尝试向API发送GET请求,但是当我在代码中添加自定义标头时,会发生奇怪的事情.某处,请求方法在到达Web服务器时更改为OPTIONS.

但是当我在没有标题的情况下执行相同操作时,它将是GET类型.当我使用应用程序postman(API开发工具)时,请求工作正常!

请求代码:

    let token = this.generateClientToken(privateKey, message);

    let myheaders = {
      "appID": appID,
      "authorizationkey": token
    }

    fetch('http://localhost:8080/api/app/postman', {
      method: "GET",
      // body: JSON.stringify(''),
      headers: myheaders
    }).then(function(response) {
      console.log(response.status);     //=> number 100–599
      console.log(response.statusText); //=> String
      console.log(response.headers);    //=> Headers
      console.log(response.url);        //=> String

      return response.text()
    }, function(error) {
      console.log(error.message); //=> String
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

服务器日志输出(带标头):

worker_1  | 172.18.0.4 -  17/Mar/2017:15:47:44 +0000 "OPTIONS /index.php" 403
web_1     | 172.18.0.1 - - [17/Mar/2017:15:47:44 +0000] "OPTIONS /api/app/postman HTTP/1.1" 403 5 "-" "Mozilla/5.0 (Macintosh; Intel …

我的 REST API 后端当前使用基于 cookie 的 CSRF 保护。

基本过程是后端设置一个可由客户端应用程序读取的 cookie，然后在后续的 HXR 请求（我的 CORS 设置允许）中，自定义标头与 cookie 一起传递，服务器检查两个值是否匹配。

本质上，这一切都是通过 Spring Security 中的一行非常简单的 Java 代码启用的。

.csrf().csrfTokenRepository(new CookieCsrfTokenRepository())

当 UI 从同一域提供服务时，这非常有效，因为客户端中的 JS 可以轻松访问（非 http-only）cookie 来读取值并发送自定义标头。

当我希望将我的客户端应用程序部署在不同的域上时，我面临的挑战就来了，例如

API: api.x.com
UI: ui.y.com

我解决这个问题的想法是

1. 令牌可以与 cookie 一起在自定义响应标头中发回，而不是仅在 cookie 中发回。
2. 然后，客户端读取自定义标头和本地存储（使用本地存储或者可能通过在客户端动态创建 cookie，但这次是在 UI 域上，以便稍后可以读取）。
3. 随后，客户端在自定义请求标头中发出 XHR 请求时将使用该值，并且步骤 1 中设置的 cookie 也将随之使用。
4. 服务器检查这两个值（cookie 和请求标头）是否已设置并且它们是否完全匹配。

这是一种众所周知/可接受的方法吗？任何人都可以从安全角度识别这种方法的任何明显缺陷吗？

显然，API 服务器需要允许 UI 域使用 CORS + 允许凭据并在 CORS 策略中公开自定义响应标头。

编辑

我将尝试使用我编写的自定义存储库在 Spring Security 中实现此目的：

import org.springframework.security.web.csrf.CookieCsrfTokenRepository;
import org.springframework.security.web.csrf.CsrfToken;
import org.springframework.security.web.csrf.CsrfTokenRepository;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; …

我正在通过热模块重新加载 - 开发服务器获得CORS问题.我在端口上使用dev-server 3000但是应用程序是从另一个端口提供的http://localhost:52024/.

这是我得到的错误(Chrome,Windows 10):

GET http://localhost:3000//sockjs-node/info?t=1502216500095 404 (Not Found)
XMLHttpRequest cannot load http://localhost:3000//sockjs-node/info?t=1502216500095. The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:52024' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
[WDS] Disconnected!

实际上我遇到两个错误:第一个是由//路径中的双斜线引起的,另一个是与CORS相关的错误.这是我的webpack.config.js:

const webpack = require('webpack'),
    path = require('path');

module.exports = {
    entry: …

后端退货

Access-Control-Allow-Headers: *

我有一个要求

fetch('url-here', {
    // ...
    headers: {
        'X-Auth': token,
    }
})

它可以在Chrome中使用，但对于Firefox，

跨域请求被阻止：同源策略禁止在<... cut ...>处读取远程资源。（原因：CORS预检通道的CORS标头“ Access-Control-Allow-Headers”中缺少令牌“ X-Auth”）。 ..cut ...>。（原因：CORS请求未成功）

在整个 RDF 规范中，EBNF-NOTATION XML 规范用于指定文档的语法。所以我想知道如何使用 Antlr/bison/yacc （也许这些工具中的一些标志我不知道如何搜索） \xe2\x80\x94\xc2\xa0 或我不使用的其他工具\xe2\x80\ x99 还不知道 \xe2\x80\x94 来使用这些规范并生成一个解析器供我在尝试加载之前使用它来查看我的 RDF 是否格式良好。

我的特定用例的示例语法是：\n https://www.w3.org/TR/n-quads/#sec-grammar

我已经将此语法转换为 Antlr4 语法，并使用该工具创建了一个解析器，并尝试编写自己的递归下降解析器，但它非常耗时，如果必须再次执行此操作，我宁愿不重复该练习。

实际上没有任何代码，这只是一个信息请求。

我想要做的基本上是复制/粘贴此 XML EBNF-NOTATION 中指定的语法，并生成类似于 Antlr 提供的解析器生成器。