CORS 设置 Cookie 不工作

Posted 2023-03-04

【中文标题】CORS 设置 Cookie 不工作

【英文标题】：CORS Set Cookie Not working

【发布时间】：2017-09-28 20:29:54

【问题描述】：

我遇到了无法在跨域场景中设置 cookie 的问题。

首先，我想描述一下我的场景。基本上，我有 3 个客户端平台，它们是 web、ios、android。这 3 个平台将与我的后端端点进行通信。

因为这个问题只与 Web 和后端有关。 Web 和后端在不同的域中。

我的网站 (React JS) 将作为 http://webdomain1.com 托管。 我的身份验证端点（Spring Boot 应用程序）将作为 http://backenddomain1.com 托管并监听端口 8080

我正在使用 chrome 浏览 http://webdomain1.com 并尝试通过 Ajax 将身份验证用户名和密码发送到 http://backenddomain1.com 并且后端会向 Web 发出令牌。响应将响应“Set-Cookie”并将令牌设置为 cookie。但是，通过 chrome 开发人员工具进行检查，我没有看到在 http://webdomain1.com 中设置的 cookie。

这是我的 ajax 代码：

axios(
            method:'post',
            url: 'http://backenddomain1.com/auth/rentilife/authenticate',
            data: this.loginModel,
            withCredentials: true,
            headers: 'X-Requested-With': 'XMLHttpRequest'
        ).then((response) => 
            document.cookie="test=value";
        ).catch(function (error) 
            //console.log(error);
        ); 

我的后端代码如下：

@Configuration
@EnableWebMvc
public class WebConfiguration extends WebMvcConfigurerAdapter

    @Value("$allowed.origin.domains")    
    private String[] allowedOriginDomains;

    @Override
    public void addCorsMappings(CorsRegistry registry) 
        registry.addMapping("/**")
            .allowCredentials(true)
            .allowedHeaders("*")
            .allowedMethods("*")
            .allowedOrigins(allowedOriginDomains);
    

响应头如下：

Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://webdomain1.com
Content-Type:application/json;charset=UTF-8
Date:Mon, 01 May 2017 11:34:17 GMT
Set-Cookie:XA=eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJhMWN8Y2h1YW5ob3I4NUBnbWFpbC5jb20iLCJpc3MiOiJnYWdlc2lzLmNvbSIsImV4cCI6MTQ5MzY0MjA1OCwiaWF0IjoxNDkzNjM4NDU4LCJ1c2VybmFtZSI6aGAZ21haWwuY29tIn0.OGVpymzgOzoLhjdhJS6OMbYnCB1NhwfVxCP7E8dxSahKYZvE5lZBrMBN5xgylOZoOWLHRB0C28j2Ps6zO1s7KF_KuNI6lPn1hU2oCjGZkp4X2HGj1rPBhmB7jy5oXpBB0GZDu8HV5u-HeVh2HfDH1KaCw-pJdPH66y0e6ugJghR36StqfrphTu1ideSjsWgN7BTpVip_uVP8aDKjVLZsQjnntlVLqrrEt0wutn10xXDs5d_pULi3wn0s18IPQFWA9iiC0d8s5hNk-AdVKmMhD9wQrczxYoPO5WqKIf5SFFKHa7bYJPUNJ6mSw6zshS1Bnj1cn_joJ8wo9mKQr05Lhw;domain=webdomain1.com;path=/
Transfer-Encoding:chunked
Vary:Origin
X-Application-Context:gateway:8080

请求标头：

Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate
Accept-Language:en-GB,en;q=0.8,en-US;q=0.6,la;q=0.4
Connection:keep-alive
Content-Length:57
Content-Type:application/json;charset=UTF-8
Host:backenddomain1.com:8080
Origin:http://webdomain1.com
Referer:http://webdomain1.com/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/57.0.2987.133 Safari/537.36
X-Requested-With:XMLHttpRequest

寻求指导。感谢有人可以提供帮助。

【问题讨论】：

会话 cookie（我认为您正在尝试做的事情）仅用于同一个域。您所描述的更符合不记名令牌的处理方式。看看oauth.net/2

【参考方案1】：

您不能为其他域设置 cookie，因为这样做会带来巨大的安全问题。 在您的情况下，第一个解决方案是 http://webdomain1.com 向您的 API 发送请求并从响应中添加 cookie。如果您确实需要网站上的 cookie，则需要这样做。 可能可以从标头中读取 cookie 信息，但我不确定。

示例响应：

    'auth':'Success',
    'cookieName':'yourCookie',
    'cookieValue':'eatoinshruldu'

这样做将允许您的不同后端实施他们自己的身份验证和安全解决方案。

---

另一种选择是仅对您的 API 域执行权限和身份验证检查，因此在此域而不是您的网站上设置 cookie。

【讨论】：

看起来解决方法只是在获取响应时在 javascript 站点上设置 cookie。对了，我来实现访问认证的权限。