跨域

 

1.什么是跨域?

本地域与服务端的域不一致,是由浏览器同源策略限制的场景,不同源即不同域,就是跨域。

注意:协议端口不同造成的跨域,前台无能为力。 域仅仅是通过URL的首部来识别,而不会去尝试判断相同的IP对应着两个域 。 或者两个域是否在同一个IP上。

2.什么是同源策略?

浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同。

只要 "协议+域名+端口" 任何一个不同都被当作不同的域。

3.跨域解决方案

(1)通过jsonp跨域

JSONP:

原理是:

动态插入script标签,通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。

由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。

JSONP:json+padding(内填充),顾名思义,就是把JSON填充到一个盒子里

优点:是兼容性好,简单易用,支持浏览器与服务器双向通信。

缺点:只支持get。只支持http

JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。


总结:通过iframe的src属性由外域转向本地域,跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。


6、 跨域资源共享(CORS)

普通跨域请求:只服务端设置Access-Control-Allow-Origin即可,前端无须设置,若要带cookie请求:前后端都需要设置。

需注意的是:由于同源策略的限制,所读取的cookie为跨域请求接口所在域的cookie,而非当前页。

目前,所有浏览器都支持该功能(IE8+:IE8/9需要使用XDomainRequest对象来支持CORS)),CORS也已经成为主流的跨域解决方案。


CORS

服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。

通过修改document.domain来跨子域

将子域和主域的document.domain设为同一个主域.前提条件:这两个域名必须属于同一个基础域名!而且所用的协议,端口都要一致,否则无法利用document.domain进行跨域

主域相同的使用document.domain

使用window.name来进行跨域

window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的

使用HTML5中新引进的window.postMessage方法来跨域传送数据

还有flash、在服务器上设置代理页面等跨域方式。个人认为window.name的方法既不复杂,也能兼容到几乎所有浏览器,这真是极好的一种跨域方法。


React中跨域问题的完美解决方案

针对react版本^16.6.0有多种解决方案


方案一:package.json中加上proxy代理配置

在packge.json加入

“proxy”:{

'/app':{

"tatget":"http://server.sssss.com:8080/.....",

secure:false,

"changeOrigin":true,

}

}


axios


import axios from 'axios'

http.post = function(api, data){

return new Promise((resolve, reject) =>{

axios.post(api, params).then((tes)=>{resolve(res)})

})

}


http.get = function(api, data){

return new Promise((resolve, reject) =>{

axios.get(api, params).then((tes)=>{resolve(res)})

})

}

export default http


在react组件中使用

const res = await http.post(url, params)

你可能感兴趣的:(跨域)