一次接口迁移引发的跨域问题

Posted 2021-02-28 huakaiyoushi

解决前提：一定要打日志，日志是追踪到bug点的前提

一、跨域是什么

浏览器不能执行其他网站上的脚本。由浏览器的同源策略造成的，是浏览器对javascript的安全限制。

协议、域名、端口、子域名不同都会导致跨域，如

参考网址：https://www.jianshu.com/p/8fa2acd103ea

二、跨域的解决方案有哪些

JSONP：听说是只能实现get请求，而cors支持所有类型的http请求
CORS：Cross-Orgin Resource Sharing，又称跨域资源共享。一般放在后端处理，在拦截器或微服务的gateway网管中设置请求头允许跨域请求；
HttpServletResponse httpResponse = (HttpServletResponse) response;
HttpServletRequest request1 = (HttpServletRequest) request;

// 不需要携带cookie，设置为*即可；*表示允许所有域名跨域，可以让多台前端服务器调用
httpResponse.setHeader("Access-Control-Allow-Origin", request1.getHeader("Origin"));
// 响应标头指定响应访问所述资源到时允许的一种或多种方法预检请求。
httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
// 响应 header 指示多长时间的结果预检请求（即包含在所述信息Access-Control-Allow-Methods和Access-Control-Allow-Headers的 headers ）可以被缓存。
httpResponse.setHeader("Access-Control-Max-Age", "0");
// 用于 preflight request （预检请求）中，列出了将会在正式请求的 Access-Control-Expose-Headers 字段中出现的首部信息
httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token,Access-Control-Allow-Headers");
// 为true时允许携带cookie，但此时不允许Access-Control-Allow-Orgin设置通配符*，只允许指定IP地址进行访问
httpResponse.setHeader("Access-Control-Allow-Credentials", "true");

参考网址：https://www.cnblogs.com/tangyin/p/9934885.html

参考网址，阿里云开发者手册：https://cloud.tencent.com/developer/section/1189896

nginx配置解决跨域

## api测试联调
location /1.3.0.2/ {
        add_header ‘Access-Control-Allow-Origin‘ ‘*‘;
        proxy_pass http://172.16.2.11:30204/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
        add_header Access-Control-Allow-Headers "Content-Type,voucher-id,token";
}

三、请求解析

请求方式共有八种，GET/POST/PUT/DELETE/PATCH/HEAD/OPTIONS/TRACE;

请求：请求行+请求头+请求体
响应：响应行+响应头+响应体
状态码：
1xx 消息，一般是告诉客户端，请求已经收到了，正在处理，别急...
2xx 处理成功，一般表示：请求收悉、我明白你要的、请求已受理、已经处理完成等信息.
3xx 重定向到其它地方。它让客户端再发起一个请求以完成整个处理。
4xx 处理发生错误，责任在客户端，如客户端的请求一个不存在的资源，客户端未被授权，禁止访问等。
5xx 处理发生错误，责任在服务端，如服务端抛出异常，路由出错，HTTP版本不支持等。

1、请求头是什么

网络的转载，参考如下，
(1) Host:ss1.bdstatic.com // Host就是主机的意思，在这里表示我们请求的服务器网址
 
(2) User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
// User-Agent是用户代理的意思，它告诉服务器客户端使用的操作系统及版本、CPU类型、浏览器及版本、浏览器渲染引擎等信息
 
(3) Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
// Accept表示浏览器支持的MIME类型，这里又出来了一个新名词MIME，MIME的英文全称是 Multipurpose Internet Mail Extensions（多
功能 Internet 邮件扩充服务），它是一种多用途网际邮件扩充协议，这里就理解成浏览器支持的网页代码类型就可以啦。
// text/html,application/xhtml+xml,application/xml 等都是MIME类型。斜杠前面是类型，后面是子类型，类型指定大范围，子类型是
类型中更为明确的类型。
// text是用于标准化地表示的文本信息，文本消息可以是多种字符集和或者多种格式的。
// text/html表示html文档
// Application：用于传输应用程序数据或者二进制数据，这里我们如果App编程的话就需要用这个
// application/xhtml+xml表示 xhtml 文档, application/xml表示 xml 文档。
则默认为1，若被赋值为0，则用于提醒服务器哪些是浏览器不接受的内容类型。
 
(4) Accept-Language:zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.3
// Accept-Language表示浏览器所支持的语言类型
// zh-CN表示简体中文，zh表示中文，en-US表示美式英文，en表示英文
// 当然这里的q也是权重系数啦
 
(5) Accept-Encoding:gzip, deflate, br
// Accept-Encoding表示浏览器有能力解码的编码类型
// gzip是 GNU zip 的缩写，它是一个 GNU 自由软件的文件压缩程序，也经常用来表示 gzip 这种文件格式
// deflate是同时使用了 LZ77 算法与哈夫曼编码（Huffman Coding）的一个无损数据压缩算法
// br ~ 当然也是一种编码方式啦

(6) Connection:keep-alive
// Connection表示客户端与服务连接类型
// Keep-Alive表示持久连接

2、请求体是什么

请求参数，例，msg=12345678-SQ201708101649&type=1