前后端开发过程中的跨域问题总结

1.何为跨域问题

出于浏览器的同源策略限制。同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能不能使用。可以说web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议、主机和端口号

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不一致，即跨域

当前页面url	被请求页面url	是否跨域	原因
http://www.a.com	http:www.a.con/index.html	没有跨域	同源（协议、域名、端口相同）
http://www.a.com	https://www.a.com	跨域	协议不同
http://www.a.com	http:www.b.com	跨域	主域名不同
http://www.a.com	http://org.a.com	跨域	子域名不同
http://www.a.com:8080	http://www.a.com:8081	跨域	端口号不同

 2.同源策略的限制：

1、无法读取非同源网页的Cookie、LocalStorage 和 IndexedDB

2、无法接触非同源网页的DOM

3、无法向非同源地址发送AJAX请求

3、解决跨域问题

1、jsonp 前端解决

可自行百度

2、springboot CorsFilter

@Configuration
public class CorsConfig {public CorsConfig() {}@Beanpublic CorsFilter corsFilter() {// 1. 添加cors配置信息CorsConfiguration config = new CorsConfiguration();// 设置允许所有请求config.addAllowedOrigin("*");// 设置允许请求的方式config.addAllowedMethod("*");// 设置允许的headerconfig.addAllowedHeader("*");// 设置是否发送cookie信息config.setAllowCredentials(true);// 2. 为url添加映射路径UrlBasedCorsConfigurationSource corsSource = new UrlBasedCorsConfigurationSource();corsSource.registerCorsConfiguration("/**", config);// 3. 返回重新定义好的corsSourcereturn new CorsFilter(corsSource);}}

3、nginx配置

server {listen       89;server_name  localhost;# 允许跨域请求的域，*代表所有add_header 'Access-Control-Allow-Origin' *;# 允许带上cookie请求add_header 'Access-Control-Allow-Credentials' 'true';# 允许请求的方法，比如 GET/POST/PUT/DELETEadd_header 'Access-Control-Allow-Methods' *;# 允许请求的headeradd_header 'Access-Control-Allow-Headers' *;location / {root   html;index  test.html;}}

4、webpack本地代理

proxy: {'/api/v1': {target: "http://xx.x.x.xxx:8080",pathRewrite: {'^/api/v1': ''},secure: false,changeOrigin: true,logLevel: "debug"}}

这个在本地开发过程中经常遇到，由node.js完成跨域

5、websocket

websocket是HTML5的一个持久化的协议，它实现了浏览器和服务器的全双工通信，同时也是跨域的一种解决方案。websocket和http都是应用层协议，都基于TCP协议。但是websocket是一种双向通信协议，在建立连接之后，websocket的服务器与客户端都能主动向对方发送或接收数据。同时，websocket在建立连接时需要借助http协议，连接建立好了之后client与server之间的双向通信就与http无关了

注意：htpps协议网站不能嵌套http协议的页面