什么是跨域?如何解决跨域问题?

简介: 什么是跨域?如何解决跨域问题?

在这里插入图片描述

什么是跨域?

1.CORS全称Cross-Origin Resource Sharing,意为跨域资源共享。当一个资源去访问另一个不同域名或者同域名不同端口的资源时,就会发出跨域请求。如果此时另一个资源不允许其进行跨域资源访问,那么访问就会遇到跨域问题。
2.跨域是指浏览器不能执行来自其它网站的脚本,是由浏览器的同源策略造成的,是浏览器对JavaScript 施加的安全限制。(需要注意的是,跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了)

引出同源策略

1.之所以会出现跨域现象,是因为受到了同源策略的限制,同源策略要求源相同才能正常进行通信,即协议、域名、端口号都完全一致。
2.同源的存在,又可以保护用户隐私信息,防止身份伪造等。

同源策略限制内容

  • Cookie、LocalStorage等存储性内容
  • DOM 节点
  • AJAX 请求不能发送

如何解决跨域问题?

  1. 使用JSONP:前端技术使用 jQuery的ajax解决方案,服务端使用JSON.toJSONString。
  2. 使用CORS:在响应头上添加Access-Control-Allow-Origin属性,指定同源策略的地址。同源策略默认地址是网页的本身。只要浏览器检测到响应头带上了CORS,并且允许的源包括了本网站,那么就不会拦截对应的请求响应。(对比jsonp,优点在于功能更加强大支持各种HTTP Method,缺点是兼容性不如JSONP)

    前端:支持原生ajax、jQuery ajax、vue、axios
    服务端:支持Java、Nodejs、Python、PHP等
  3. 指定的页面设置document.domain属性:指定的页面就可以共享Cookie。
  4. Nginx反向代理:配置nginx(修改nginx目录下的nginx.conf),在这个服务器上配置多个前缀来转发http/https请求到多个真实的服务器即可。这样,这个服务器上所有url都是相同的域名、协议和端口。这样对于浏览器来说,这些url都是同源的,就不会有跨域限制了。
相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
缓存 JSON 前端开发
CORS 详解,终于不用担心跨域问题了
CORS 详解,终于不用担心跨域问题了
2308 0
CORS 详解,终于不用担心跨域问题了
|
1月前
|
运维 前端开发 JavaScript
关于跨域,和跨域问题的完整解决方案
关于跨域,和跨域问题的完整解决方案
23 0
|
6月前
|
JSON 前端开发 JavaScript
解决跨域问题
解决跨域问题
|
1月前
|
JSON 前端开发 安全
前端解决跨域的六种方法
跨域问题是指当一个网页试图访问来自不同源(域名、协议、端口)的资源时,浏览器会出于安全考虑而限制这种访问。这是因为浏览器的同源策略防止了恶意网站获取其他网站的敏感信息。
|
1月前
|
XML JSON 前端开发
跨域问题
跨域问题
24 0
|
10月前
|
前端开发 Java 应用服务中间件
项目里面怎么解决跨域的?
项目里解决跨域的方法
|
11月前
|
移动开发 JSON 前端开发
前端跨域
跨域是指在浏览器中,一个页面的脚本试图去访问不同域名下的资源时,浏览器会阻止这种跨域的请求。这是为了保护用户的安全,防止恶意代码获取用户数据。但是,在一些场景下,我们需要进行跨域请求,这时就需要一些跨域解决方式。
|
JSON Android开发 数据格式
|
Web App开发 JSON 前端开发
跨域问题总结
跨域问题总结
946 0
跨域问题总结
|
安全 JavaScript 前端开发
什么是跨域,如何解决跨域?
还在等什么,快来一起讨论关注吧,公众号【八点半技术站】,欢迎加入社群
什么是跨域,如何解决跨域?