前端之跨域
一、什么是跨域
理解跨域之前先简略理解一下URL的组成以及什么是同源策略
1、URL
http://zengfengzhou.cn/hospital/1000_0下面这个url相当于http://zengfengzhou.cn:80/hospital/1000_0http 协定zengfengzhou.cn 域名80 端口号，个别是跟在域名前面，由冒号隔开,浏览器默认80端口号省略hospital/1000_0 申请门路2、同源策略
同源（orgin）指的是端口号、协定、域名雷同
举个栗子不同源的状况localhost:80与localhost:9000 端口号不同www.baidu.com与www.taobao.com 域名不同http://localhost:3000与https://localhost:3000 协定不同在百度控制台中尝试拜访本人的资源，能够发现没有产生谬误然而如果拜访淘宝的资源的话，能够发现报错，并且也提醒了没有容许跨域拜访的申请头3、跨域
依据浏览器制订的同源策略，不是同源状况下也就是不同端口、不同域名、不同协定的数据交互会产生跨域
二、呈现跨域后的限度
1、因为Cookie、LocalStorage、SessionStorage都是保留到浏览器端的，而且是同源的，所以这些都不能拜访到
2、无奈获取资源（CSS、JS、HTML中的DOM）
3、最次要还是无奈进行数据交互Ajax
三、怎么解决跨域
1、应用CORS解决
MDN中CORS这样解释
跨源资源共享 (CORS) （或艰深地译为跨域资源共享）是一种基于HTTP 头的机制，该机制通过容许服务器标示除了它本人以外的其它origin（域，协定和端口），这样浏览器能够拜访加载这些资源。这里有人可能会留神到CORS是基于HTTTP申请头的，咱们就能够想到，只有在HTTP申请头中增加容许跨域的信息，不就能够解决跨域了吗？
我的答复是：的确
我偏向于在后端增加容许跨域的信息，这样前端就不必配置了，间接把接口拿来用
后端代码解决跨域的全局配置类CorsConfig
@Configurationpublic class CorsConfig { @Bean public CorsWebFilter corsFilter() { CorsConfiguration config = new CorsConfiguration(); config.addAllowedMethod("*"); //容许的申请办法 config.addAllowedOrigin("*"); //容许的申请源 config.addAllowedHeader("*"); //容许的申请头 UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser()); source.registerCorsConfiguration("/**", config); return new CorsWebFilter(source); }}2、应用JSONP
原生js
<script src="http://zengfengzhou.cn/hospital/1000_0?callback=jsoncallback"></script>function jsoncallback() { //调用接口后的回调函数 //具体逻辑}呈现如上图所示，示意胜利了
Vue中实现
let url = "http://zengfengzhou.cn/hospital/1000_0"; this.$jsonp(url, { params: { a: '参数1', b: '参数2' } }) .then(res => { // console.log("回调函数逻辑"); }) .catch(error => { console.log(error); })3、nginx反向代理
个人感觉nginx应用起来十分不便，次要就是一些配置的问题，想要理解具体配置能够看看官网中文档
nginx中文站
在nginx.conf配置
server { listen 8080; #监听端口号 server_name localhost;#域名地址 root html; location / { #申请http://localhost:8080，将该申请转发到域名一 proxy_pass http://域名一; } #申请http://localhost:8080/api，将该申请转发到域名二，则保障申请在同一个域，解决跨域问题 location /api { proxy_pass http://域名二/api; }}