为跨源请求设置cookie

如何跨起源共享cookie ?更具体地说，如何使用Set-Cookie头结合头Access-Control-Allow-Origin?

以下是对我的情况的解释:

我试图在localhost:3000上托管的web应用程序中为运行在localhost:4000上的API设置一个cookie。

似乎我在浏览器中收到了正确的响应头，但不幸的是，它们没有效果。这些是响应头:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://localhost:3000
Vary: Origin, Accept-Encoding
Set-Cookie: token=0d522ba17e130d6d19eb9c25b7ac58387b798639f81ffe75bd449afbc3cc715d6b038e426adeac3316f0511dc7fae3f7; Max-Age=86400; Domain=localhost:4000; Path=/; Expires=Tue, 19 Sep 2017 21:11:36 GMT; HttpOnly
Content-Type: application/json; charset=utf-8
Content-Length: 180
ETag: W/"b4-VNrmF4xNeHGeLrGehNZTQNwAaUQ"
Date: Mon, 18 Sep 2017 21:11:36 GMT
Connection: keep-alive

此外，当我使用Chrome开发工具的网络选项卡检查流量时，我可以在响应cookie下看到cookie。然而，我不能看到一个cookie被设置在应用程序选项卡下的存储/ cookie。我没有看到任何CORS错误，所以我假设我还遗漏了其他东西。

有什么建议吗?

我更新:

我正在使用React-Redux应用程序中的请求模块向服务器上的/signin端点发出请求。对于服务器，我使用express。

Express服务器:

res.cookie('token', 'xxx-xxx-xxx', { maxAge: 86400000, httpOnly: true, domain: 'localhost:3000' })

在浏览器中请求:

request.post({ uri: '/signin', json: { userName: 'userOne', password: '123456'}}, (err, response, body) => {
    // doing stuff
})

更新二:

我现在像疯狂一样设置请求和响应头，确保它们在请求和响应中都存在。下面是截图。注意标题Access-Control-Allow-Credentials, Access-Control-Allow-Headers, Access-Control-Allow-Methods和Access-Control-Allow-Origin。看看我在Axios的github上发现的问题，我的印象是所有必需的标题现在都设置好了。然而，还是没有运气……

当前回答

对于express，请将express库升级到4.17.1，这是最新的稳定版本。然后;

在CorsOption中:将origin设置为本地主机url或前端生产url，并将凭据设置为true 如

  const corsOptions = {
    origin: config.get("origin"),
    credentials: true,
  };

我使用config npm module动态地设置了我的原点。

然后，在res.cookie中:

对于localhost:你根本不需要设置sameSite和secure选项，你可以将http cookie的httpOnly设置为true，以防止XSS攻击和其他有用的选项，这取决于你的用例。

对于生产环境，您需要将sameSite设置为none用于跨源请求，并将secure设置为true。记住，sameSite只适用于express最新版本，目前最新的chrome版本只设置了https上的cookie，因此需要安全选项。

以下是我如何让我的作品充满活力

 res
    .cookie("access_token", token, {
      httpOnly: true,
      sameSite: app.get("env") === "development" ? true : "none",
      secure: app.get("env") === "development" ? false : true,
    })

2020-09-20 11:53:44

其他回答

跨工地方法

若要允许通过CORS请求成功接收和发送cookie，请执行以下操作。

后端(服务器)HTTP报头设置:

将HTTP报头Access-Control-Allow-Credentials值设置为true。确保设置了HTTP标头Access-Control-Allow-Origin和Access-Control-Allow-Headers。不要使用通配符*。当你设置允许的源时，请确保使用包括方案在内的整个源，即http不等同于CORS中的https。

有关在express js中设置CORS的更多信息，请阅读这里的文档。

Cookie设置: 2021年Chrome和Firefox更新时的Cookie设置:

SameSite = band Secure

当执行SameSite=None时，需要设置Secure。查看文档在SameSite和安全的要求。还要注意，Chrome开发工具现在已经改进了过滤和突出显示网络选项卡和应用程序选项卡中的cookie问题。

前端(客户端):设置XMLHttpRequest。凭据标志为true，这可以通过不同的方式实现，这取决于所使用的请求-响应库:

ES6 fetch()这是HTTP的首选方法。使用凭证:'include'。 jQuery 1.5.1用于遗留目的。使用xhrFields: {withCredentials: true}。 axios作为一个流行的NPM库的例子。使用withCredentials: true。

代理方法

避免做跨站点(CORS)的事情。您可以通过代理来实现这一点。只需使用DNS(子域)和/或负载均衡将所有流量发送到相同的顶级域名和路由。对于Nginx来说，这相对来说不太费力。

这种方法与JAMStack完美结合。JAMStack要求API和Webapp代码在设计上完全解耦。越来越多的用户屏蔽第三方cookie。如果API和Webapp可以很容易地在同一台主机上提供服务，第三方问题(跨站点/ CORS)就解决了。在这里或这里阅读有关JAMStack的信息。

旁注

事实证明，如果域名包含端口，Chrome将不会设置cookie。为localhost(没有端口)设置它不是问题。非常感谢Erwin的提示!

2017-09-25 19:32:23

注意2020年发布的Chrome浏览器。

未来的Chrome版本将只提供跨站点的cookie 请求，如果他们设置为SameSite=None和安全。

所以如果你的后端服务器没有设置SameSite=None, Chrome将默认使用SameSite=Lax，不会使用这个cookie {withCredentials: true}请求。

更多信息https://www.chromium.org/updates/same-site。

Firefox和Edge的开发人员也希望在未来发布这一功能。

Spec在这里找到:https://datatracker.ietf.org/doc/html/draft-west-cookie-incrementalism-01#page-8

2020-07-04 08:11:02

在最新的chrome标准中，如果CORS请求带cookie，它必须打开samesite = none和secure，后端域名必须打开HTTPS，

2021-08-27 10:13:19

希望这能有所帮助对于我关于sameSite属性，启用CORS后，我还添加了“CookieSameSite = SameSiteMode。没有一个“ 到启动文件中的CookieAuthenticationOptions

app.UseCookieAuthentication(新CookieAuthenticationOptions ｛ … CookieSameSite = SameSiteMode。没有, … }

2021-12-16 09:37:03

为了让客户端能够从跨源请求读取cookie，您需要具备:

来自服务器的所有响应都需要在它们的头中有以下内容: Access-Control-Allow-Credentials:真客户端需要用withCredentials: true选项发送所有请求

在我使用Angular 7和Spring Boot的实现中，我用以下方法实现了这一点:

服务器端:

@CrossOrigin(origins = "http://my-cross-origin-url.com", allowCredentials = "true")
@Controller
@RequestMapping(path = "/something")
public class SomethingController {
  ...
}

origins = "http://my-cross-origin-url.com"部分将在每个服务器的响应头中添加Access-Control-Allow-Origin: http://my-cross-origin-url.com

allowCredentials = "true"部分将为每个服务器的响应头添加Access-Control-Allow-Credentials: true，这是我们为了让客户端读取cookie所需要的

客户端:

import { HttpInterceptor, HttpXsrfTokenExtractor, HttpRequest, HttpHandler, HttpEvent } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from 'rxjs';

@Injectable()
export class CustomHttpInterceptor implements HttpInterceptor {

    constructor(private tokenExtractor: HttpXsrfTokenExtractor) {
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // send request with credential options in order to be able to read cross-origin cookies
        req = req.clone({ withCredentials: true });

        // return XSRF-TOKEN in each request's header (anti-CSRF security)
        const headerName = 'X-XSRF-TOKEN';
        let token = this.tokenExtractor.getToken() as string;
        if (token !== null && !req.headers.has(headerName)) {
            req = req.clone({ headers: req.headers.set(headerName, token) });
        }
        return next.handle(req);
    }
}

使用这个类，您实际上可以为所有请求注入额外的内容。

第一部分req = req。clone({withCredentials: true});，是为了发送每个请求withCredentials: true选项所需要的。这实际上意味着将首先发送OPTION请求，以便在发送实际的POST/PUT/DELETE请求之前获得cookie和授权令牌，这些请求需要将此令牌附加到它们(在头中)，以便服务器验证和执行请求。

第二部分专门为所有请求处理反csrf令牌。在需要时从cookie中读取它，并将其写入每个请求的头部。

期望的结果是这样的:

2020-06-13 19:38:16

为跨源请求设置cookie

推荐文章

最新文章

标签