域-ajax跨域问题|springboot解决跨域|nginx搭建api网关

超、凢脫俗 2022-05-13 11:58 227阅读 0赞

### 什么是跨域问题? ###

浏览器出于安全考虑，限制了JS发起跨站请求，使用XHR对象发起请求必须遵循同源策略（SOP：Same Origin Policy），跨站请求会被浏览器阻止，这对开发者来说是很痛苦的一件事，尤其是要开发前后端分离的应用时。  
前台调用后台接口,如果不是同一域内就是跨域问题(前端ajax访问请求域名,与浏览器内地址不相同)  
![这里写图片描述][70]  
HTTP请求头

#请求域
    Origin: ”http://localhost:3000“
    
    #这两个属性只出现在预检请求中，即OPTIONS请求
    Access-Control-Request-Method: ”POST“
    Access-Control-Request-Headers: ”content-type“

响应头

#允许向该服务器提交请求的URI，*表示全部允许，在SpringMVC中，
    # 如果设成*，会自动转成当前请求头中的Origin
    Access-Control-Allow-Origin: ”http://localhost:3000“
    
    #允许访问的头信息
    Access-Control-Expose-Headers: "Set-Cookie"
    
    #预检请求的缓存时间（秒），即在这个时间段里，对于相同的跨域请求不会再预检了
    Access-Control-Max-Age: ”1800”
    
    #允许Cookie跨域，在做登录校验的时候有用
    Access-Control-Allow-Credentials: “true”
    
    #允许提交请求的方法，*表示全部允许
    Access-Control-Allow-Methods:GET,POST,PUT,DELETE,PATCH

### 产生跨域安全问题原因 ###

*  浏览器限制:校验不通过
 *  跨域:
 *  XHR(XMLHttpRequest)请求(其他json不受浏览器限制):

### 解决思路 ###

*  浏览器:加请求参数,不让浏览器检测跨域问题
 *  XHR:不发XHR请求,就算是跨域的,浏览器也不会拦截
 *  使用JSONP,不支持post,支持get
 *  httpclient进行内部转发
 *  使用http响应头,允许跨域
 *  使用nginx搭建企业API接口网关

跨域:1.被调用方,修改代码,支持跨域  
2.调用方:隐藏跨域,通过代理  
![这里写图片描述][70 1]

### springboot解决跨域问题 ###

@RestController
    //实现跨域注解
    //origin="*"代表所有域名都可访问
    //maxAge飞行前响应的缓存持续时间的最大年龄，简单来说就是Cookie的有效期 单位为秒
    //若maxAge是负数,则代表为临时Cookie,不会被持久化,Cookie信息保存在浏览器内存中,浏览器关闭Cookie就消失
    @CrossOrigin(origins = "*",maxAge = 3600)
    @RequestMapping("/command")
    public class CommandController { 
    }

### 使用nginx搭建企业API接口网关 ###

域名相同,项目不同特征  
nginx拦截所有请求,进行分发,权限控制

server { 
            listen       80;
            server_name  www.itmayiedu.com;
            location /A { 
    		    proxy_pass  http://a.a.com:81/A;
    			index  index.html index.htm;
            }
    		location /B { 
    		    proxy_pass  http://b.b.com:81/B;
    			index  index.html index.htm;
            }
        }

### 参考文章 ###

[作者:Topepy 浏览器的跨域问题以及解决方案][Topepy]

[70]: /images/20220513/1ca065603a244ea7bea65b2b925766ba.png
[70 1]: /images/20220513/92555071dfc0433bafaf7781fb73ffc3.png
[Topepy]: https://blog.csdn.net/u013084331/article/details/51114288