跨域解决方法

红太狼 2023-10-12 21:04 29阅读 0赞

### 一、什么是跨域 ###

跨域问题是由浏览器的同源策略引起的。同源策略是一种安全策略，它限制了一个页面从另一个源加载任何资源，包括脚本、样式、图片、iframe等。同源是指协议、域名、端口号都相同，如果不同则被认为是跨域。

### 二、为什么会跨域 ###

跨域问题的出现是因为浏览器在发送跨域请求时会先向目标服务器发送一个OPTIONS请求，询问服务器是否允许跨域请求。如果服务器返回的响应中包含了Access-Control-Allow-Origin头部，表示允许跨域请求，浏览器才会发送真正的跨域请求。否则，浏览器会拒绝跨域请求，抛出跨域异常。

![84c4d34909614b0b8cb45517ecb0bd30.png][]

### 三、跨域解决方法 ###

1.JSONP(JSON with Padding)：是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。利用 <script>元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析；

jQuery代码

$.ajax({
        url: "http://127.0.0.1:3000/a/jsp/kytest.jsp",
        type: "GET",
        dataType: 'jsonp',
        success: function (retData, status) {
            console.log(retData, status)
        }
    })

Java代码:将跨域请求的数据作为回调函数的参数返回到页面中。简单来说就是返回JS文本过去

String callback = request.getParameter("callback");
    out.println(callback + "(" + jsonString + ")");

2.CORS(跨来源资源共享)：CORS是一种允许当前域（domain）的资源（比如html/js/web service）被其他域（domain）的脚本请求访问的机制，通常由于同域安全策略（the same-origin security policy）浏览器会禁止这种跨域请求。

response.setHeader("Access-Control-Allow-Origin", "*");

3.代理：服务器请求不受同源策略限制

①在项目编写代理接口，前端调用使用代理接口获取数据（在此使用的Jsp，工具包为hutool）

<%@ page import="cn.hutool.http.HttpUtil" %>
    <%@ page import="java.util.HashMap" %>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%
        String Number = request.getParameter("Number");
        String name = request.getParameter("name");
    
        HashMap<String, Object> paramMap = new HashMap<>();
        paramMap.put("Number", Number);
        paramMap.put("name", name);
    
        String result1 = "";
        try {
            result1 = HttpUtil.get("http://127.0.0.1:8080/aaa/bbb", paramMap);
        } catch (Exception ignored) {
            result1 = "{\"msg\": \"请求超时!!\",\"success\": false}";
        }
        out.println(result1);
    %>

②通过部署第三方代理（例如nginx等），这里不做过多追溯，见前面文章

**总结：想解决浏览器跨域，方法一和方法二都需要后端支持，方法三自己搭建代理服务器也比较麻烦**

[84c4d34909614b0b8cb45517ecb0bd30.png]: https://img-blog.csdnimg.cn/84c4d34909614b0b8cb45517ecb0bd30.png