什么是跨域？
由于浏览器的同源策略，导致一个域的js脚本不能直接和另外一个域的内容进行交互，这就叫跨域。
同源策略是浏览器最基本的安全功能，但是近年来，前后端分离项目越来越多，前端和后端可能部署在不同域名下，当前端请求后端接口时，这就会经常出现跨域问题。
什么是浏览器的同源策略？
下面是百度百科上的解释：
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
浏览器一般是从两个方面来做同源策略的，一个是接口的请求，还有一个是对Dom的查询。
浏览器为什么要有同源策略？
我们都知道大部分网站都会把登录信息放在cookie中，每次请求，浏览器会自动将cookie附加在请求头中，这样服务器就知道这个用户已经登录过了。
有一天，你打开某网盘的网站：pan.xxx.com，登录成功以后，网站将登录成功的token放入cookie中。接着，你就开始欣赏着自己这么多年来收藏的各种资源。
突然，右下角蹦出了一个广告，你习惯性的点右上角的x号，但是这个广告的关闭居然放在的左上角，这导致你不小心打开了这个广告：ad.sss.com。
当你打开广告网站的瞬间，它就在背后做着一些不可描述的事情。由于没有同源策略的限制，它向pan.xxx.com网站发起了请求，而这个时候，浏览器自动将你的cookie加在了请求头上，里面就有pan.xxx.com的token，这样一来，广告网站就相当于登录了你的账号，可以在你的网盘网站里为所欲为了。
怎么样，没有同源策略的话，你在网上将没有任何隐私。
那怎么区别两个url是否同源呢？
同源指的是两个url的协议、主机和端口都相同。
比如下面：
| 当前URL | 目的URL | 是否同源 | 原因 |
|---|---|---|---|
| https://www.baidu.com/index.html | https://www.baidu.com/other/index.html | 是 | |
| https://www.baidu.com/index.html | http://www.baidu.com/other/index.html | 否 | 协议不同 |
| https://www.baidu.com/index.html | https://map.baidu.com/other/index.html | 否 | 主机不同 |
| http://www.baidu.com/index.html | http://www.baidu.com:81/other/index.html | 否 | 端口不同 |
怎么解决跨域？
很多人在回答这个问题的时候，可能都会说其中一个方法是使用JSONP来解决，但是这种方式不是不可以解决，只是局限性太大（只支持get请求，还需要添加回调函数等等），治标不治本，因此在真实场景中很少采用此种方式。
真正的根本解决方案还是需要在服务端设置CORS（跨域资源共享），例如下面java后端，可以这样设置
@Configuration
public class MyConfiguration {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowCredentials(true)
.allowedMethods("GET", "POST", "DELETE", "PUT","PATCH")
.maxAge(3600);
}
};
}
}
其中addMapping是后端接口，allowedOrigins是允许跨域请求的地址，我这里是设置了所有请求可以被任何地址跨域请求，当然，也可以根据需要个性化设置。
还有一种常见方法是使用代理，例如nginx将后端接口和前端地址放在同一个域名下，这样就不会有跨域的问题了。
往期推荐
本文分享自微信公众号 - pipi蛋（pipidan_fuyun）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
来源：oschina
链接：https://my.oschina.net/zhanpg/blog/4738458