跨域问题，何为跨域？

何为跨域？

跨域，指的是从一个域名去请求另外一个域名的资源。即跨域名请求！跨域时，浏览器不能执行其他域名网站的脚本，是由浏览器的同源策略造成的，是浏览器施加的安全限制。

 

例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。

同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；

具体理解：

http://www.123.com --> http://www.123.com 非跨域

http://www.123.com --> http://admin.123.com 跨域 ----> 域名不同

http://www.123.com --> http://www.456.com 跨域 ----> 域名不同

http://www.123.com:8081 --> http://www.funtl.com:8080 跨域 ---->端口号不同

http://www.123.com --> https://www.123.com 跨域 ----->协议不同

为什么要跨域？

现实工作开发中经常会有跨域的情况，因为公司会有很多项目，也会有很多子域名，各个项目或者网站之间需要相互调用对方的资源，避免不了跨域请求。

如何解决跨域

最简单的解决方法，就是把浏览器设为忽略安全问题，设置--disable-web-security。不过只能用于开发pc端的页面，到移动端就不行了。

1、JSONP（JSON with Padding）方式，

它是JSON的一种”使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，两个跨域的网页不能进行沟通，而 HTML 的script 元素是一个例外。所以利用<script>元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。 JSONP请求一定需要对方的服务器做支持才可以。

要注意 ：JSONP只支持GET请求，不支持POST请求。

优点是兼容性好，可用于解决主流浏览器的跨域数据访问的问题。

缺点是仅支持get方法具有局限性。

2、CORS方式

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

CORS要求浏览器和服务器的同时支持，是跨域的根本解决方法，由浏览器自动完成。

优点在于功能更加强大支持各种HTTP Method，缺点是兼容性不如JSONP。

在响应头上添加Access-Control-Allow-Origin属性，指定同源策略的地址。同源策略默认地址是网页的本身。只要浏览器检测到响应头带上了CORS，并且允许的源包括了本网站，那么就不会拦截请求响应。

3、NGINX方式

a网站向b网站请求文件时，向b网站发送一个获取的请求，nginx根据配置文件接收这个请求，代替a网站向b网站来请求这个资源，nginx拿到这个资源后再返回给a网站，以此来解决了跨域问题。

server {
        #监听8000端口
        listen       8000;
        #监听指定的ip地址
        server_name  10.10.2.116;
        #对对应url路径执行反向代理,如10.10.2.116:8000/demo
        location /demo {
        #目标的ip地址
            proxy_pass http://10.10.2.116:10037; 
        }
}

这样就可以访问10.10.2.116的8000端口来获取同ip下10037端口下的相应资源，解决跨域。

看完这篇文章的感悟

公司中的业务会同时启动多个服务，各个服务之前又有相互关联，要实现相互之间的访问，解决办法就是使用Nginx的反向代理 -九五小庞
————————————————
版权声明：本文为CSDN博主「weixin_43996959」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43996959/article/details/103091455

标签：http,跨域,何为,问题,域名,浏览器,com,请求
来源： https://www.cnblogs.com/pxyblog/p/16076877.html