JavaScript 跨域问题的几种解决方法

最新推荐文章于 2023-05-15 17:34:42 发布
最新推荐文章于 2023-05-15 17:34:42 发布
阅读量646 收藏 1
点赞数 1
分类专栏： ● Web基础 ------【前端技术】 文章标签： javascript Ajax 跨域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011368943/article/details/78077648
版权

一、 前言

二、 版本

编号修改日期版本号修改人修改说明
12017.09.241.0ZZ初稿
12017.12.261.0ZZ完善 CORS + Demo

三、为什么会产生跨域问题

  域名、协议、端口者都相同就是同一个域，否则就是跨域。

  JavaScript出于安全方面的考虑，采取了同源策略，即当前域的客户端脚本不允许在没有明确授权的情况下，读取其他域的资源。如果没有同源策略，那么一旦误执行了恶意网站的js脚本，该js脚本便可以随意获取其他域页面document、session、cookie等信息，很不安全。

  然而我们经常把网站的一些脚本、图片或其他资源放到静态服务器，页面可以更快的加载，而且减少了Web服务器的压力。或者系统间接口调用。这时就产生了跨域问题。

  • eg：console 报错如下（端口不同）：
XMLHttpRequest cannot load http://localhost:8888/other/index.jsp. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

四、如何解决跨域问题

4.1、代理服务器

  一种简单的办法，就是把跨域的工作交给服务器，从后台获取其他站点的数据再返回给前台，也就是跨域代理（Cross Domain Proxy）。这种方法似乎蛮简单的，改动也不太大。不过就是http请求多了些，响应慢了些，服务器的负载重了些。

4.2、通过jQuery实现JSONP的方式实现跨域

JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。

JSONP实现跨域请求的原理是动态创建

<html>
    <body>
        <div>
            <button id="btn_jsonp" onclick="jsonp_function()">JSONP点击</button>
        </div>
    </body>

    <script type = "text/javascript">
        function jsonp_function(){
            // $("#btn").click(function() {
                $.ajax({
                    async: true,
                    url: "http://localhost:8080/ApiDemo_Yshow/Student/getStudentList",
                    type: "GET",
                        dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
                        jsonp : 'callback',  // 回调函数名形参 url?callback = call_back
                        jsonpCallback: 'call_back', // 回调函数名实参
                    success: function(data, status) {
                        console.log('状态为：' + status);
                        console.log(data);
                    }
                });
            // });
        }
    </script>
</html>
  • 服务端处理请求：
package com.api.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.fastjson.JSON;
import com.api.common.ListResponse;
import com.api.model.Student;
import com.api.service.StudentService;

@Controller
@RequestMapping("/Student/")
public class StudentController {

    @Autowired
    StudentService studentService;

    @RequestMapping(value = "getStudentList", produces="text/html;charset=UTF-8")
    @ResponseBody
    public String getStudentList(String callback) { // 回调函数名也可以写死
    ListResponse<Student> studentList = studentService.getStudentList();

    return callback+"("+JSON.toJSONString(studentList)+")";
    }
}
  • 服务端返回的数据格式如下：
call_back({
    "items": [
        {
            "age": 21,
            "classes": "173521班",
            "id": 1,
            "name": "张敏",
            "sex": "女"
        },
        {
            "age": 21,
            "classes": "173521班",
            "id": 2,
            "name": "江南",
            "sex": "男"
        }
    ]
})
  • 如上述代码所示jQuery实现jsonp调用的步骤是：
    • 浏览器端定义回调函数作为url参数传送到服务端。url?callback = call_back。
    • 服务端接收到参数后根据参数名+data数据封装成js函数格式的数据返回到浏览器端。
    • 浏览器端接受到数据后执行回调函数，Jquery中为success函数。执行返回的js代码。
    • 从而得到data数据。

JSONP是较为常用的一种跨域方式，不受浏览器兼容性的限制，然而它支持GET请求，RESTful架构并不适用。

4.3、通过CORS实现跨域（推荐）

跨域资源共享（Cross-Origin Resource Sharing）是由W3C提出的一个用于浏览器以XMLHttpRequest方式向其他源的服务器发起请求的规范。不同于JSONP，CORS是以Ajax方式进行跨域请求，需要服务端与客户端的同时支持。目前CORS在绝大部分现代浏览器中都是支持的。

  • 前端ajax请求：
<html>
    <body>
        <div>
            <button id="btn_cors" onclick="CORS_function()">CORS点击</button>
        </div>
    </body>

    <script type = "text/javascript">
        function CORS_function() {
            $.ajax({
                async: true,
                url: "http://localhost:8080/ApiDemo_Yshow/Student/getStudentByName",
                type: "GET",
                dataType: "json",
                data: {
                    "name": "江南天地"
                },
                success: function(data, status) {
                    console.log('状态为：' + status);
                    console.log(data);
                }
            });
        }
    </script>
</html>
  • 服务端处理请求 - 方法1 - setHearder：
package com.api.controller;

import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.api.common.SingleResponse;
import com.api.service.StudentService;

@Controller
@RequestMapping("/Student/")
public class StudentController {

    @Autowired
    StudentService studentService;

    @RequestMapping(value = "getStudentByName")
    @ResponseBody
    public SingleResponse getStudentByName(@RequestParam(value = "name", required = false) String name,//
        HttpServletResponse response) {
    SingleResponse student = studentService.getStudentByName(name);
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
    return student;
    }
}
  • 服务端处理请求 - 方法2 - @CrossOrigin 注释（SpringMVC4.2以上）
package com.api.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.api.common.SingleResponse;
import com.api.service.StudentService;

@Controller
@RequestMapping("/Student/")
public class StudentController {

    @Autowired
    StudentService studentService;

    @CrossOrigin(origins = "*", maxAge = 3600)
    @RequestMapping(value = "getStudentByName",method = RequestMethod.POST)
    @ResponseBody
    public SingleResponse getStudentByName(String name) {

    SingleResponse student = studentService.getStudentByName(name);
    return student;
    }
}
  • 服务端处理请求-方法3 - 第三方CORSFilter - web.xml
<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
    <init-param>
        <param-name>cors.allowed.origins</param-name>
        <param-value>*</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowed.methods</param-name>
        <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowed.headers</param-name>
        <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,自定义header</param-value>
    </init-param>
    <init-param>
        <param-name>cors.exposed.headers</param-name>
        <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
    </init-param>
    <init-param>
        <param-name>cors.support.credentials</param-name>
        <param-value>true</param-value>
    </init-param>
    <init-param>
        <param-name>cors.preflight.maxage</param-name>
        <param-value>10</param-value>
    </init-param>
</filter>

<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

五、参考资料

六、后记

本文仅用于学习笔记记录。初始版本比较粗糙,后续会不断完善。

且听风吟_z
关注
专栏目录
js解决跨域访问问题
11-09
js解决跨域访问问题，在用js访问web后台方法的时候，有时候会遇到跨域访问的问题。文档中介绍了跨域访问产生的原因以及相应的解决办法及代码示例。
解决js跨域问题
淡定
12-03 359
如何解决js跨域问题 Js跨域问题是web开发人员最常碰到的一个问题之一。所谓js跨域问题，是指在一个域下的页面中通过js访问另一个不同域下 的数据对象，出于安全性考 虑，几乎所有浏览器都不允许这种跨域访问，这就导致在一些ajax应用中，使用跨域的web service会成为一个问题。 解决js跨域问题，目前在客户端和服务端都有一些现成的解决方案，但这些方案并不能解决所有问题。下面我们...
JS中的跨域问题及解决办法汇总
热门推荐
lareinalove的博客
11-16 4万+
一、什么是跨域？ 在了解跨域之前，首先要知道什么是同源策略（same-origin policy）。简单来讲同源策略就是浏览器为了保证用户信息的安全，防止恶意的网站窃取数据，禁止不同域之间的JS进行交互。对于浏览器而言只要域名、协议、端口其中一个不同就会引发同源策略，从而限制他们之间如下的交互行为： 1.Cookie、LocalStorage和IndexDB无法读取； 2.DOM无法获得； ...
JS跨域问题解决方案
小锋QQmm~~的香蕉乐园
08-25 421
JS跨域问题有两个解决方案： 一、前端程序解决； 二、后端程序解决； 一、前端程序解决 缺点：只支持GET请求（假如前端强制使用POST，JSONP自动将参数转为GET） 前端如下： $.ajax({ url: "...", data: { id: 9 }, dataType: 'json', dataType: 'jsonp', jsonp: 'callback', jsonpCallback: 'data', succes
JavaScript中的跨域问题解决方案
m0_75198698的博客
04-28 621
具体实现方式为在客户端创建一个script标签，将其src属性设置为一个跨域请求的URL，并且在URL的参数中添加一个回调函数名。具体实现方式为，在同域的服务器上设置一个代理服务器，将客户端的请求发送给代理服务器，代理服务器再将请求发送给目标服务器，获取目标服务器的响应后再将响应发送给客户端。postMessage是一种跨域解决方案，它可以在不同窗口间进行通信，因此可以通过在不同窗口间发送消息来解决跨域问题。例如，在本地的一个网页中，无法通过AJAX向其他域名的服务器发起请求，这就是跨域问题。
javascript 跨域问题以及解决办法
10-19
解决跨域问题的方法有几种，包括： - JSONP（JSON with Padding）：利用script标签不受同源策略限制的特性来实现跨域数据请求。JSONP请求返回的是一个函数调用的脚本，这个函数在网页中定义好，比如`callback(data)`...
javascript跨域方法、原理以及出现问题解决方法（详解）
10-23
为了解决这个问题，开发人员可以采用以下几种跨域方法： 1. **基于IFrame的跨域** 当两个页面的域名共享相同的二级域名时，可以通过设置`document.domain`属性实现跨域。例如，`aa.xx.com`和`bb.xx.com`可以相互...
完美解决浏览器跨域的几种方法(汇总)
12-03
【解决跨域的几种方法】 1. JSONP(JSON with Padding)：这是一种较早的跨域解决方案。它利用`<script>`标签没有同源策略限制的特性，由服务器返回一个JavaScript函数调用形式的字符串，客户端预先定义好该函数，当`...
javascript跨域原因以及解决方案分享
10-24
解决JavaScript跨域问题的方法多种多样，主要包括以下几种： 1. JSONP（JSON with Padding）：利用`<script>`标签不受同源策略限制的特性，通过动态创建`<script>`标签，并将回调函数名作为参数传递给服务器。...
js跨域的解决方案
最新发布
muzidigbig的博客
05-15 1万+
指的是浏览器不能执行其他网站的脚本，简单来说是浏览器同源政策的限制，浏览器针对于的限制。两个页面拥有相同的协议，端口，域名就是同源，如果有一个不相同就是不同源。保护用户，防止一些网站盗取用户信息。 1、通过jsonp跨域 2、跨域资源共享（CORS） 3、document.domain + iframe跨域 4、location.hash + iframe 5、window.name + iframe跨域 6、postMessage跨域 7、nginx代理跨域 8、nodejs中间件代理跨域（非vue、v
JS 跨域问题
FireCode的博客
04-11 2635
官方文档介绍 一、简介 跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript 施加的安全限制。 同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；   跨源资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME（媒体类型）类型 的 POST 请求），浏览器必须首先使
JS跨域问题
sinat_38741770的博客
02-09 272
同源策略（浏览器的安全策略）—》跨域 如果非同源，共有三种行为受到限制。 Cookie、LocalStorage 和 IndexDB 无法读取。 DOM 无法获得。 Ajax 请求不能发送。 解决跨域 jsonP 原生 jQuery实现，express实现 修改请求头：cors 代理 http-proxy-middleware（自动代理） 首先导入中间件： npm i htt...
js的跨域问题
饮冰十年的博客
11-07 591
跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合 JS原生解决跨域问题： var result = null; window.onload = function () {
JS中的跨域问题
sally18的博客
08-05 1390
一，什么是跨域 1.定义：跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。但是一般情况下不能这么做，它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。跨域的严格一点的定义是：只要 协议，域名，端口有任何一个的不同，就被当作是跨域 所谓同源是指，域名，协议，端口均相同。这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的
JS跨域问题及其解决办法
三分自留地
03-04 126
什么是跨域？ 跨域是出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的...
js解决跨域问题
小罗的博客
05-15 3187
一、同源策略 所谓同源策略，就是指两个页面具有相同的协议，主机（也常说域名），端口，三个要素缺一不可 二、什么是跨域 单地理解就是因为JavaScript同源策略的限制，一个域的页面去请求另一个域的资源，A域的页面去请求B域的资源。 三、解决跨域 1.Jsonp实现跨域 jsonp的原理：动态创建<script>标签，而<script>的src属性是没有跨域限制的 前端创建script标记，设置src，添加到head中（你可以往body中添加） 后台返回一个.
JS:跨域问题详解
海生的博客
08-04 504
1.在HTML文档中能够发起HTTP请求的元素有：  ，， ，，请求HTML文档文件，请求（get/post），请求其他资源文件，音频视频，插件，用于音频视频，从域的概念来讲，HTML中的这些元素，都是可以跨域请求资源的。这些请求都是传统的HTTP请求。  哪些算是跨域：  什么是跨域：我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户
JS解决跨域问题
努力奋斗
02-13 314
简单粗暴: &lt;a href="www.baidu.com" target="_blank"&gt;&amp;nbsp;&amp;nbsp;测试平台&lt;/a&gt;这种写法有跨域问题。解决跨域问题如下: &lt;a href="https://www.baidu.com/" target="_blank"&gt;&amp;nbsp;&a
理解JavaScript：九种跨域解决方案详解
总结，跨域是浏览器对JavaScript的一个安全限制，但通过上述九种方式，开发者可以灵活地解决跨域问题，实现前后端的数据交互。然而，每种方法都有其适用场景和限制，选择合适的方法需结合实际需求和安全性考虑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值