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

举报
霍格沃兹测试开发 发表于 2023/03/05 10:59:45 2023/03/05
【摘要】 什么是跨域?1.CORS全称Cross-Origin Resource Sharing,意为跨域资源共享。当一个资源去访问另一个不同域名或者同域名不同端口的资源时,就会发出跨域请求。如果此时另一个资源不允许其进行跨域资源访问,那么访问就会遇到跨域问题。2.跨域是指浏览器不能执行来自其它网站的脚本,是由浏览器的同源策略造成的,是浏览器对JavaScript 施加的安全限制。(需要注意的是,跨...

在这里插入图片描述

什么是跨域?

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都是同源的,就不会有跨域限制了。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。