正文 

当前位置： 首页 > IT > java教程

关于前端如何解决跨域问题(代码片段)

haoyiwei haoyiwei     2022-12-13     496

关键词：

跨域

什么是跨域

　　浏览器为保证安全，增加的同源限制，其实请求是发出了，服务器也相应了，但是被浏览器劫持了。所谓同源是指，域名，协议，端口均相同，浏览器才会觉得符合要求。

　　一旦有一个不同源，浏览器便会触发安全机制。

跨域解决办法有哪些？

应该有很多，我就介绍JSONP, CORS, window.postMessage这三种理解的比较好的

  • JSONP

    原理: <script>标签不受跨域限制，ps：所有src属性都不受同源限制，比如<img>

JSONP缺点: 只支持GET请求，不支持其他类型请求；优点：兼容性很好好，可以在古老的浏览器中运行。

  • CORS

    CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求。

把请求分为了两种：简单请求和复杂请求。

如何分辨简单请求和复杂请求呢？只要不符合下面条件，就是复杂请求。

  • 请求方法是以下三种方法之一：

HEAD

GET

POST

  • HTTP的头信息不超出以下几种字段：

Accept

Accept-Language

Content-Language

Last-Event-ID

Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

知识点：

  • 面对复杂请求，浏览器会在第一次先发送一个预检请求，预检请求使用的是OPTIONS方法，携带Origin, Access-Control-Request-Method, Access-Control-Request-Headers，

  • 服务器拒绝的话，返回也是正常http响应，只是没有Access-Control-Allow-Origin字段； 服务器同意的话，返回的响应里除了Access-Control-Allow-Origin，还会有
Access-Control-Allow-Methods，
Access-Control-Allow-Headers，
Access-Control-Allow-Credentials，//它的值是一个布尔值，表示是否允许发送Cookie。默认false，不发送
Access-Control-Max-Age // 该字段可选，用来指定本次预检请求的有效期，单位为秒, 在此期间，不用发出另一条预检请求。
  • 一旦服务器通过了"预检"请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。

  • HTML5 window.postMessage API

    window.postMessage是一个安全的，基于事件的消息API

  1. 发送消息

需要发送的窗口winA，调用postMessage方法，即可发送消息，其中winA还可以是文档窗口中的iframe:

  var iframe = document.getElementById(‘my-iframe‘);
  var win = iframe.documentWindow;

postMessage语法：otherWindow.postMessage(message, targetOrigin, [transfer]);
举栗子：win.postMessage(‘Hello‘, ‘ttp://jhssdemo.duapp.com/‘);

  1. 接收消息

要想接收到之前源窗口通过postMessage发出的消息，只需要在目标窗口注册message事件并绑定事件监听函数，就可以在函数参数中获取消息。

注意：postMessage只能发送字符串信息。


    window.onload = function() 
        var text = document.getElementById(‘txt‘);    
        function receiveMsg(e) 
            // e 有三个属性：data, origin, source
            console.log("Got a message!");
            console.log("\nMessage: " + e.data);
            console.log("\nOrigin: " + e.origin);
            // console.log("Source: " + e.source);
            text.innerHTML = "Got a message!<br>" +
                "Message: " + e.data +
                "<br>Origin: " + e.origin;
        
        if (window.addEventListener) 
            //为窗口注册message事件，并绑定监听函数
            window.addEventListener(‘message‘, receiveMsg, false);
        else 
            window.attachEvent(‘message‘, receiveMsg);
        
    ;

如何解决跨域问题(代码片段)

作为前端开发，你还在为解决跨域而烦恼吗？跨域怎么产生就不在细说了，详看浏览器的同源策略这里我推荐这两种方式跨域，其它的跨域方式都还有很多但都不推荐，主流的也就这两种方式。解决方案如下：开发环境生产环境... 查看详情

如何解决跨域问题(代码片段)

前端向后端发送ajax请求时，会遇到跨域问题:　　在浏览器中打开，按F12查看console会发现如下报错：所以需要后端在返回响应时在响应头返回跨域允许的键值对。　　cors.py #此py文件只为了在中间件中增加跨域的响应值fromdjan... 查看详情

fastadmin关于跨域问题解决(代码片段)

FastAdmin关于跨域问题解决之前很久之前收集到社区的问题。https://forum.fastadmin.net/thread/277今天又有人问到，无法打开，估计是网络问题。以下为完整配置1##CORSheadersupport##Onewaytousethisisbyplacingitintoafilecalled"cors_support"#underyourN... 查看详情

vue解决axios请求出现前端跨域问题(代码片段)

vue解决axios请求出现前端跨域问题首先祝大家1024节日快乐最近在写纯前端的vue项目的时候，碰到了axios请求本机的资源的时候，出现了访问报404的问题。这就让我很难受。查询了资料原来是跨域的问题。在正常开发中跨域... 查看详情

vue解决axios请求出现前端跨域问题(代码片段)

vue解决axios请求出现前端跨域问题首先祝大家1024节日快乐最近在写纯前端的vue项目的时候，碰到了axios请求本机的资源的时候，出现了访问报404的问题。这就让我很难受。查询了资料原来是跨域的问题。在正常开发中跨域... 查看详情

reactajax关于跨域问题的解决(代码片段)

react应用中需要集成第三方ajax库(或者自己封装)，这里使用axios解决跨域问题：使用代理的方式来解决这个问题，设置代理的方式，在脚手架的package.json文件中的进行配置;"proxy":"https://localhost:5000"//这时... 查看详情

reactajax关于跨域问题的解决(代码片段)

react应用中需要集成第三方ajax库(或者自己封装)，这里使用axios解决跨域问题：使用代理的方式来解决这个问题，设置代理的方式，在脚手架的package.json文件中的进行配置;"proxy":"https://localhost:5000"//这时... 查看详情

前后端分离，解决跨域问题及django的csrf跨站请求保护(代码片段)

...求，正确设置JavaScript端需要设置的headers信息方能实现；关于跨域，前端会先发送OPTIONS请求，进行预检，检查后端是否允许前端设置的相应的请求头，请求内容 functiongetCookie(name)varcookieValue=null; 查看详情

关于跨域通信问题及解决方案(代码片段)

什么是跨域JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下：首先什么是跨域，简单地... 查看详情

关于跨域那些事儿(代码片段)

在工作中，难免会遇到跨域的问题，就像你高高兴兴的带着老婆吃着火锅，啊不对，是匆匆忙忙的在搬砖，突然浏览器告诉你跨域了，意不意外？既然遇到了，就只能解决他，平时一顿乱操作，也能解决问题，但一直没有好好的... 查看详情

jsonp解决前端跨域问题(代码片段)

一：跨域问题广义的跨域：指一个域下的文档或脚本试图去请求另一个域下的资源。1.)资源跳转：a链接、重定向、表单提交2.)资源嵌入：<link>、<script>、<img>、<frame>等dom标签，还有样式中backg... 查看详情

解决跨域问题，实例调用百度地图(代码片段)

...什么呢?所谓的同源是指，域名、协议、端口均为相同。前端常见跨域解决方案（全）当年那些风骚的跨域操作全解跨域请求处理办法不要再问我跨域的问题了九种“姿势”让你彻底解决跨域问题2.如何解决跨域？JSONP: 查看详情

java前后端跨域问题解决(代码片段)

 前端页面部署在nginx上，后端代码部署在服务器上，前端访问后台会出现跨域问题 新建一个过滤器/***开放跨域权限***/@Slf4jpublicclasstestFilterimplementsFilterpublicvoidinit(FilterConfigfilterConfig)throwsServletExceptionpublicvoiddoFilter(S 查看详情

解决跨域问题(代码片段)

...，在相互访问的时候就会形成跨域。解决方案：前端通过JsonP的配置后端解决办法：在UserController加上@CrossOrigin注解前端通过Ajax请求跨域登录： <form> <divclass="user-name&# 查看详情

前端学习记录(十五)jsonbird解决跨域请求问题(代码片段)

最近在用vuecli框架搭建一个项目练习，其中一个页面需要猫眼电影的数据接口，想实现的最终效果如下：                ​​​​​​​        ​​​​​​​        ​​​​​​​        ​... 查看详情

前端开发：深入使用proxy代理解决跨域问题(代码片段)

在前端领域里面，跨域指的是浏览器允许向服务器发送跨域请求，进而克服Ajax只能同源使用的局限性限制。同源策略是一种约定，而且是浏览器中最基本也是最核心的安全功能，若缺少了该策略，浏览器非常容易被攻击；同源... 查看详情

解决跨域session同步问题(代码片段)

跨域来源:(前端站点和后端API布署到不同的站点) 解决方案一.服务端设置1.配置允许跨域请求publicclassBaseAction/***支持跨域请求*@authorfxd*@paramresponse*@sinceJDK1.6*/protectedvoidcrossComain(HttpServletRequestrequest,HttpServletResponserespo 查看详情

前端开发：mac环境的chrome浏览器设置跨域请求的samesite解决方法(代码片段)

前段时间在开发项目的时候，遇到一个比较稀奇古怪的跨域问题，不管怎么写就是解决不了，后来通过Chrome浏览器的设置，解决了跨域问题，这样就不需要在项目里通过设置代理来解决跨域问题，直接通过设置修改Chrome浏览器的... 查看详情