项目中的跨域问题

一、什么是跨域

跨域策略是浏览器的一种安全措施，是由浏览器产生的，是对跨域行为的限制，目的是防止恶意网页模拟用户请求其他网站（比如社交网站），调用其他网站的接口，在用户不知情的情况下修改数据或者进行其他攻击行为。

二、跨域是如何产生的

以下是一些会导致跨域问题的情况：

1. 不同域名：当一个网页试图从一个不同域名的网页获取数据时，浏览器会阻止这个操作，从而产生跨域问题。
2. 不同协议：如果网页使用的是HTTP协议，但是需要从HTTPS协议的网页中获取数据，由于协议不同，也会产生跨域问题。
3. 不同端口：即使两个网页的域名和协议都相同，但是如果端口不同，也会产生跨域问题。例如，一个网页通过HTTP的80端口访问，但是需要从HTTP的8080端口获取数据，就会产生跨域问题。

三、如何解决跨域问题

解决跨域问题的方法有以下几种：

1. JSON with Padding（CORS）：通过服务器端的设置，允许跨域请求。在服务器端设置响应头，添加“Access-Control-Allow-Origin”、“Access-Control-Allow-Methods”和“Access-Control-Allow-Headers”等字段，以允许跨域请求。
2. 设置Access-Control-Allow-Origin头部：在CDN端添加HTTP响应头，以允许跨域请求。具体方法可以参考各个CDN服务提供商的文档。
3. 使用代理：在服务器端设置代理，将跨域请求转发到目标服务器，并返回目标服务器响应。
4. 使用JSONP：通过在网页上动态创建script标签，将请求封装成一个回调函数，并传递给服务器。服务器端返回JSONP格式的脚本，该脚本在回调函数中执行。
5. 使用postMessage方法：通过postMessage方法，不同来源的网页可以通过事件对象之间的消息传递进行通信。

四、Cookie跨域

如标题说的，这个问题是最近团队在项目中碰到的。首先这个问题是在前端用chrome开发碰到的，本地连接到测试服，测试是https的环境，所以是存在跨域的，但是服务器端已经解决了上面所说的访问跨域问题。说到这个问题，在获取手机号的时候需要验证码，验证码则需要用到 cookie。而此次碰到的问题就是前端验证码无法正常显示。对于这个问题，起初是以为跨域的问题，其实并不尽然，是 chrome 浏览器无法正常带上 cookie。在这当中就有一个关键参数，那就是响应头当中的 set-cookie 。Set-Cookie是HTTP协议中的一个响应头字段，用于在客户端浏览器中设置一个Cookie。Set-Cookie字段包含有关Cookie的详细信息，包括名称、值、有效期等。

Set-Cookie属性包括：

• Expires：指定Cookie的过期时间，以UTC时间表示。
• Max-Age：指定Cookie的最大有效期，以秒为单位。
• Secure：指定只在HTTPS协议下使用该Cookie。
• HttpOnly：指定只在HTTP协议下使用该Cookie，不允许通过JavaScript访问。
• same-site: 用于在跨站请求时决定是否发送Cookie。这有助于防止跨站请求伪造攻击（CSRF）。

这些属性可以根据需要添加到Set-Cookie字段中，以进一步定义Cookie的属性和行为。

而此次要说到的，则是same-site属性。SameSite属性可以有三个值：

• Strict：仅允许在第一方请求中携带Cookie，即浏览器仅在请求的网页与被请求的网页完全一致时才会发送Cookie。
• Lax：允许在部分第三方请求中携带Cookie，即在请求的网页与被请求的网页完全一致或者存在子域关系时才会发送Cookie。
• None：无论是否跨站都会发送Cookie，即不使用SameSite属性。

值得注意的是，SameSite属性的默认值是None，而在Chrome80之后，默认值变为了Lax。所以问题显然意见，本地与测试服环境不在同一个环境存在跨域问题，需要将same-site属性设置为None，以解决此问题。