前端 - get请求没有跨域问题？

Question

背景：

项目中，原先服务端Access-Control-Allow-Origin设置的值为*，前端请求访问正常;
后来由于公司安全限制，*更改为一系列的白名单列表（域名列表），本地调试时由于诸如http://localhost:8090的域名不在白名单之内，所以前端接口请求会报错。

报错详情如下：

status code: 403message: invalid corse

说明有跨域问题了，请求不成功。

解决方案：
服务端在之前的白名单列表Access-Control-Allow-Origin中加上了http://localhost:8090，所有访问正常——包括get请求和post请求都正常。

奇怪的现象： 在Access-Control-Allow-Origin未添加http://localhost:8090之前,

* get请求： 请求正常* post请求：请求出错，有403 跨域问题报错

区别： get请求 请求头没有origin,post请求头有origin。

get请求请求表头如下：

总结下，主要有如下几个疑问：

1. 为什么get请求不会有跨域问题。
2. 为什么get请求请求头没有origin字段，post请求请求头有origin字段。
3. 本地调试，除了让后端在白名单里面加上localhost域名，还有其它更好的方案吗？

Answer 1

本地调试,可以使用vue代理跨域,在开发测试阶段就不需要服务端来配合了
https://www.jb51.net/javascript/288449bkv.htm

Answer 2

HTTP_CODE 如果是 403，是访问用户没有权限导致的。如果是跨域的话会在控制台抛出这样的异常：
Access to XMLHttpRequest at 'xxx' from origin 'xxx' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

如果是由于安全限制增加了白名单，就不会跨域的原因了。而是一些请求的拦截。比如说OP你说的直接返回了 403 Forbidden。

---

所以你的问题1的答案的已经出来了，需要和你们的IT确认拦截规则。
那么问题3也是一样的，如果你们内网访问的话，应该默认是不会进行拦截的，就是按照正常的前端跨域代理转发就可以了。如果你们的规则是都会拦截的。也是和问题1一样的找IT那边去协调。

---

至于问题2，这个得看浏览器的实现了，这个是自动添加的。
找了一下文档 �� Origin - HTTP | MDN

从广义上讲，用户代理会在以下情况中添加 Origin 请求标头：

• 跨源请求。
• 除 GET 和 HEAD 以外的同源请求（即它会被添加到同源的 POST、OPTIONS、PUT、PATCH 和 DELETE 请求中）。

除上述规则外，还有一些特殊情况。例如，在 no-cors 模式下的跨源 GET 或 HEAD 请求不会发送 Origin 标头。

---

EDIT

理解错了，以为是IT那边加了访问拦截的白名单。其实是后端返回的响应头里面的访问允许来源从 * 改成了和白名单一样的域名清单。

那么如果在本地开发时使用 webpack 或者 vite 的 devServer.proxy 功能代理转发就可以了。
如果是已经部署到线上了，那么肯定项目域名就是在白名单中的，并不需要处理。

• 一些特殊情况，比如说你们的项目测试地址并没有在白名单中。那么可以通过测试服务器上的 Nginx 做请求的代理转发。

Answer 3

简单回答
1. 为什么get请求不会有跨域问题。
第1个问题不成立。 GET请求会有跨域问题！ 你问题中描述的现象，很有可能是get请求被浏览器使用了缓存
你可以打开开发者工具，先确认”停用缓存“没有被启用，然后看请求，应该能看到下面截图一样的内容。

2. 为什么get请求请求头没有origin字段，post请求请求头有origin字段。
跨源请求，一定会有origin字段的，这第2个问题本身也不成立。
有种特殊情况: 除了同源时get和head请求不添加origin， 还有如果在 no-cors 模式下发起了跨域的get或head请求，orgin也不会自动添加。

There are some exceptions to the above rules; for example, if a cross-origin GET or HEAD request is made in no-cors mode, the Origin header will not be added.

"no-cors" 模式是在浏览器中使用 Axios 进行 HTTP 请求时可以使用的一种模式。

这种模式下，浏览器会忽略跨域安全限制，从而允许你发送请求到不同的域名。但是，这种模式下的请求不会返回响应头信息，也不会触发浏览器的跨域安全策略。

axios.get('http://example.com', {  mode: 'no-cors'});

3. 本地调试，除了让后端在白名单里面加上localhost域名，还有其它更好的方案吗？
本地使用host给127.0.0.1配置域名，这个域名在已知白名单上。如果白名单用的是https协议，本地这个服务还得用个自签名证书。