跨域:
因为浏览器出于安全考虑,有同源策略。也就是说,如果协议、域名或者端口有一个不同就是跨域,Ajax 请求会失败。
明确几个点:
- 浏览器才会有跨域的限制,服务器之间跨域不会限制
- 不同协议会跨域,不同域名互相请求会跨域,同域名下不同端口会跨域
解决办法
JSONP
JSONP 的原理很简单,就是利用 < script > 标签没有跨域限制的漏洞。通过 < script> 标签指向一个需要访问的地址并提供一个回调函数来接收数据当需要通讯时 ,注意:这里必须使用scipt标签,否则返回的数据不会被当作js执行
后端配置返回的为一个函数运行function()的字符串形式
前端如下:注册 f 函数,在src第十行的时候,会请求改地址,后端解析callback,赋值给funcname,然后返回一个 " funcname(‘你好’) " 的字符串数据,然后在这个script标签里面就会运行 funcname(‘你好’),funcname又指向了f 函数,所以就能成功运行了,
注意
JSONP原理是动态生成script标签,通过src属性加载后端返回的数据并运行的方法,JSONP只限于GET请求,不支持POST
CORS
CORS需要浏览器和后端同时支持
浏览器会自动进行 CORS 通信,实现CORS通信的关键是后端。只要后端实现了 CORS,就实现了跨域。
服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表示哪些域名可以访问资源,如果设置通配符则表示所有网站都可以访问资源。
比如以下用node+express的后端处理:
设置了res.header(‘Access-Control-Allow-Origin’,’*’)就代表该后端的数据允许跨域,并且 * 为通配符,代表所有来源都可以访问本服务器资源。
b站视频链接
Proxy 代理
上面讲到跨域的限制是浏览器的,不同端口的服务器之间可以进行访问,不受限制,那么可以设置一个中间服务器,让它处于浏览器的同一个端口,转接中间的数据,就可以了
要进行一些设置,比如target,pathRewrite等
代理又分正向代理和反向代理
参考链接1
参考链接2