跨域解决方案

这篇具有很好参考价值的文章主要介绍了跨域解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

因为浏览器可以同时打开很多页面,可以同时保存很多授权信息,浏览器为了安全问题,采用了同源策略(浏览器存在跨域问题,服务器不存在跨域问题)

同源策略:是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSRF等攻击。同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

比如,浏览器的地址是baidu.com,页面通过ajax请求京东,就存在跨域,浏览器就阻止了该行为

现在有一个需求,两个服务器A和B,浏览器通过请求服务器A获取页面A,然后在页面A下通过ajax请求访问网页B,浏览器是不允许这样操作的,但是可以通过一些条件可以去实现

1.浏览器的页面A通过Ajax请求访问B页面时,浏览器可以先询问服务器B是否同意

如果页面A通过ajax直接访问页面B,会报错 cors -> cross origin resources sharing error,MissingAllowOriginHeader(跨域资源共享,丢失了允许跨域的头)

解决方案:

@RestController
public class UserController {
    

    //方式一:手动添加请求头
    @RequestMapping("/user")
    public User getUser(HttpServletResponse response){
        //第一个参数是添加一个请求头,第二个参数是允许请求的来源地址
        response.addHeader("Access-Control-Allow-Origin", "http://127.0.0.1:8081");
        
        //10秒钟之内再次请求的时候,就不用发送预检请求了
        response.addHeader("Access-Control-Max-Age", "10");

        //允许你发送的请求是GET请求还是POST请求
        response.addHeader("Access-Control-Allow-Method", "GET");

        return new User("java", "java");
    }


    //方式二:添加注解@CROSSORIGIN
    @RequestMapping("/user")
    @CROSSORIGIN(origin = {"http://127.0.0.1:8081"})//添加来源地址
    public User getUser(HttpServletResponse response){

        return new User("java", "java");
    }


}

浏览器的页面A访问页面B的时候,会发送两个请求,第一个请求是option——预检请求,第二请求是get——获取数据

2.服务器与服务器之间是不存在跨域问题的,因为浏览器可以同时打开十几个网站,这时,浏览器既有A页面的授权信息,也有B页面的授权信息,而服务器不可能打开十几个网站,并获取到别的页面的授权信息,否则A网站就相当于做了B网站的认证了,浏览器使得客户端能够将多个网站的用户信息都存在同一物理环境,而服务器只能保存自己所提供服务的信息

解决方案:浏览器通过网页A访问服务器A,服务器A再去访问服务器B,这样服务器A就相当于一个中间代理,去获取服务器B的网页信息

实现一:可以通过http请求服务器B获取网页B的数据,例如restTemplate,相当于手写一个方向代理服务器

实现二:nginx(方向代理,动静分离,负载均衡),修改配置文件

server {
        listen       80;
        server_name  localhost;

        ##添加以下标红的部分

        location /api {
            proxy_pass http://127.0.0.1:8082;    ##路径带有api的请求转发到端口为8082的服务器
        }

        location / {
            root   html;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

正向代理:用户A访问Google,由于存在墙,用户A只能通过先访问香港的服务器,由香港的服务器转发请求到Google服务器,这种代理模式是,用户明确要访问的地址,由于无法直接访问到最终的服务器,只能通过中间服务器去访问,直接输入Google的地址就可以了  

反向代理:用户B访问代理服务器,但是服务器B要访问哪获取数据,用户不知道

3.jsonp利用浏览器天然支持跨域的标签<script>

<script>标签天然支持跨域,只支持GET请求,例如

前端代码

<script>
    function callback(data){
        console.log(data)
    }
</script>
<script src="http://127.0.0.1:8082/cross"></script>

后端代码

@RequestMapping("/cross")
public String cross(HttpServletResponse response){
    return "callback('123')"
}

请求返回后,返回的字符串会调用前端方法cross,最终打印出123

当使用script请求地址时,会将返回的字符串,默认当成js解析。由于后端返回是的callback(xxx),所以会调用本地的callback函数。

从原理上来看,要使用JSONP,必须要后端返回相应的数据,这个就是JSONP的模式了,允许客户端传递一个callback函数,后端将数据包裹在callback函数中返回。

从原理也能看出,JSONP并不要求必须传递JSON格式的数据,只要是JS函数能够认可的数据都是可以传递的文章来源地址https://www.toymoban.com/news/detail-477190.html

到了这里,关于跨域解决方案的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • B站提示:“当前浏览器版本较低……”可行的解决方案(edge浏览器)

    问题:使用最新版浏览器访问B站,首页总是有一条横幅提示:当前浏览器版本较低,为保证您的使用体验,建议使用最新版本的浏览器访问。但是没有禁止访问,可以正常使用,但是一致提示 分析 通过网络资料查询和推测应该是:使用IE8或旧版IE访问B站的时候,提示“当前

    2024年01月20日
    浏览(63)
  • 前端浏览器的兼容性问题探讨和解决方案

    解决不同浏览器之间的兼容性问题,可以采取以下一些常用的解决方案: 使用 CSS Reset:不同浏览器对于默认样式的定义存在差异,使用 CSS Reset 可以将不同浏览器的默认样式重置为统一的基准样式,从而减少浏览器之间的差异。 使用 CSS Hack 或浏览器前缀:某些 CSS 属性或值

    2024年02月14日
    浏览(52)
  • idea修改 项目代码,浏览器页面不生效 解决方案

    1、问题描述 idea修改前端项目代码,运行谷歌浏览器不起作用。 我也试过 rebuild project, 重启idea,等方法都不管用。 再次运行谷歌浏览器,还是没有变化。 2、尝试了以下方法,还是不管用 2.1、rebuild project 2.2、设置idea自动编译 File-Settings-Build,Execution,Deployment-Compiler-勾选Buil

    2024年02月07日
    浏览(41)
  • 前端开发中常见的浏览器兼容性问题及解决方案

    提示:这里主要阐述浏览器兼容性产生的环境: 所谓的浏览器兼容性问题,是指 因为不同浏览器对同一段代码有着不同的解析,所造成页面显示效果不统一的情况。 为此,解决浏览器兼容,也成为了跨浏览器开发的一个核心问题。 当初微软不加入W3C,使得后者不采用IE的方

    2023年04月18日
    浏览(51)
  • Selenium 无头浏览器被知乎限制访问的解决方案

    我尝试使用如下代码爬取知乎的有关内容,出现知乎安全验证界面: 添加启动参数 在网上的许多文章中,反复提到了如下三行代码,然而我将他们加入代码后没有什么效果: JavaScript特殊全局变量 有一些文章提到,通过 WebDriver 启动的网页会存在一些特殊的 JS 变量,这些变

    2024年02月14日
    浏览(50)
  • 微信H5下载文件、微信浏览器无法下载文件解决方案

    手机端的微信访问网页的时候,是禁止直接下载文件的 但是IOS端可以预览.txt/.doc/.docx/.xls/xlsx/.pdf等格式的文件,Android端在下载这些格式的文件时,可以唤起 ‘即将离开微信,在浏览器打开’ 提示 所以,根据手机微信的这些限制,考虑在下载文件时,使Android微信在下载任何

    2024年02月16日
    浏览(90)
  • java实现浏览器下载附件时文件名中文乱码解决方案

    方案一:URLEncoder 解决 IE 和 谷歌浏览器的附件中文名问题。 如果客户端浏览器是 IE 浏览器 或者 是谷歌浏览器。我们需要使用 URLEncoder 类先对中文名进行 UTF-8 的编码 操作。 因为 IE 浏览器和谷歌浏览器收到含有编码后的字符串后会以 UTF-8 字符集进行解码显示。 方案二:B

    2024年03月09日
    浏览(69)
  • web浏览器在线预览Excel,PDF,world文档解决方案

    众所周知啊,在web浏览器中是无法直接预览Excel、world文档等文件的,PDF有的浏览器是打开预览,有的浏览器是跳转到下载页,行为不一致也是让开发者头疼的事情。 今天给大家提供一个解决方案,实现office文件在线预览的解决方案,这个在开发OA,推送通知触达的应用非常有

    2024年02月17日
    浏览(73)
  • Python+Selenium程序执行完,chrome浏览器自动关闭解决方案

    因为把driver = webdriver.Chrome()放在了函数内部,在函数执行完毕之后,程序内所有的步骤都结束了,关于这段程序的进程也就结束了,浏览器包含在内,所以才会自动退出。 设置全局变量,即把打开浏览器的操作放在函数外部,函数执行完毕,浏览器就不会关闭 关闭浏览器代

    2024年02月16日
    浏览(86)
  • vue项目版本打包更新后文件及浏览器存在缓存问题解决方案

    在vue.config.js中配置output,打包后的文件会带时间戳 在public/static目录下新建version.json文件  在src中新建 utils文件夹 文件夹中新建versionUpdate.js文件  在src文件夹下创建addVersion.js  写法二 修改package.json中scripts中的打包命令 版本号自加使用fs修改文件来实现 具体思路是:在执行

    2024年02月11日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包