0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

如何解决跨域问题

科技绿洲 来源:Java技术指北 作者:Java技术指北 2023-10-09 16:07 次阅读

如何解决跨域问题?首先我们需要知道什么是跨域,跨域指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器对JavaScript 施加的安全限制。

1、同源策略

根据百度百科 同源策略它是由 Netscape 提出的一个安全策略,它是浏览器最核心也是最基本的安全功能,如果缺少同源策略,则浏览器的正常功能可能都会受到影响,现在所有支持JavaScript的浏览器都会使用这个策略。

所谓同源指的是:

协议、域名、端口号都相同,只要有一个不相同,那么都是非同源。

图片

浏览器在执行脚本的时候,都会检查这个脚本属于哪个页面,即检查是否同源,只有同源的脚本才会被执行;而非同源的脚本在请求数据的时候,浏览器会报一个异常,提示拒绝访问。

①、http://www.123.com/index.html 调用 http://www.123.com/welcome.jsp 协议、域名、端口号都相同,同源。

②、https://www.123.com/index.html 调用 http://www.123.com/welcome.jsp 协议不同,非同源。

③、http://www.123.com:8080/index.html 调用 http://www.123.com:8081/welcome.jsp 端口不同,非同源。

④、http://www.123.com/index.html 调用 http://www.456.com/welcome.jsp 域名不同,非同源。

⑤、http://localhost:8080/index.html 调用 http://127.0.0.1:8080/welcom.jsp 虽然localhost等同于 127.0.0.1 但是也是非同源的。

同源策略限制的情况:

1、Cookie、LocalStorage 和 IndexDB 无法读取

2、DOM 和 Js对象无法获得

3、AJAX 请求不能发送

注意:对于像 img、iframe、script 等标签的 src 属性是特例,它们是可以访问非同源网站的资源的。

2、跨域实例演示

图片

我们创建了两个 web 项目JavaWeb01 和 JavaWeb02 分别部署在tomcat1和Tomcat2上,这两个 Tomcat 的端口号设置是不一样的,一个是 8080,一个是8081,所以这两个项目构成了非同源。那么我们从客户端(浏览器)输入访问部署在 Tomcat2 上的项目 JavaWeb2,然后在该项目中通过 ajax 去请求部署在 Tomcat1 上的项目数据,能够访问的到呢?

①、在 JavaWeb02 项目中,有一个 jsp 文件,我们通过在浏览器访问该 JSP 文件去获取 JavaWeb01 项目中的数据

< %@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false"% >
< %
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path;
% >
< !DOCTYPE html >
< head >
    < title >Title< /title >
< /head >
< script type="text/javascript" src="< %=basePath% >/js/jquery-3.3.1.min.js" >< /script >
< script type="text/javascript" >
    $(document).ready(function(){
        $.ajax({
            type:"get",
            async:false,
            url:"http://localhost:8080/JavaWeb01/getPassWordByUserNameServlet?userName=Tom",
            dataType:"json",
            success:function (data) {
                alert(data['passWord']);
            },
            error:function () {
                alert("error");
            }

        });
    })

< /script >
< body >

< /body >
< /html >

通过ajax 访问

url:"http://localhost:8080/JavaWeb01/getPassWordByUserNameServlet?userName=Tom"

去获取 JavaWeb01 项目中的数据。

②、在 JavaWeb01 项目中,创建一个 getPassWordByUserNameServlet 请求的 Servlet

package com.ys.servlet;

import com.alibaba.fastjson.JSONObject;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * Create by YSOcean
 */
@WebServlet("/getPassWordByUserNameServlet")
public class UserServlet extends HttpServlet{
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String userName = req.getParameter("userName");
        String passWord = null;
        if(userName != null){
            passWord = "123";
        }
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("passWord",passWord);
        resp.getWriter().println(jsonObject.toJSONString());
    }
}

③、在浏览器中输入 http://localhost:8081/JavaWeb02/index.jsp 链接,去调用该页面的 ajax 函数

图片

浏览器给我们返回了一个错误,这就是浏览器同源策略导致的跨域访问会报错。那么该如何解决呢?

3、跨域解决办法

①、response 添加 header 我们在 Servlet 请求返回时添加如下代码:

//*表示支持所有网站访问,也可以额外配置相应网站
resp.setHeader("Access-Control-Allow-Origin", "*");

请求结果如下:

图片

②、JSONP 方式 首先我们要修改 index.jsp 页面的 ajax 请求:

$.ajax({
            type:"get",
            async:false,
            url:"http://localhost:8080/JavaWeb01/getPassWordByUserNameServlet?userName=Tom",
            dataType:"jsonp",//数据类型为jsonp
            jsonp:"backFunction",//服务端用于接收callBack调用的function名的参数
            success:function (data) {
                alert(data["passWord"]);
            },
            error:function () {
                alert("error");
            }

        });

注意:我们修改了 dataType 的数据类型为 jsonp,并且新增了 jsop 属性值为 “backFunction”。

接着在 JavaWeb01 项目的 Servlet 中进行如下修改:

@WebServlet("/getPassWordByUserNameServlet")
public class UserServlet extends HttpServlet{
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String userName = req.getParameter("userName");
        String passWord = null;
        if(userName != null){
            passWord = "123";
        }
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("passWord",passWord);
        //1、第一种方法:*表示支持所有网站访问,也可以额外配置相应网站
        //resp.setHeader("Access-Control-Allow-Origin", "*");

        //2、第二种方法:jsonp
        String backFunction = req.getParameter("backFunction");
        resp.getWriter().println(backFunction+"("+jsonObject.toJSONString()+")");

        //resp.getWriter().println(jsonObject.toJSONString());
    }
}

结果就不截图了,下面讲讲这种方式的原理。

1、在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,即一般的ajax是不能进行跨域请求的。但 img、iframe 、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。利用 script标签的开放策略,我们可以实现跨域请求数据,当然这需要服务器端的配合。Jquery中ajax 的核心是通过 XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加 标签来调用服务器提供的 js脚本。

2、当我们正常地请求一个JSON数据的时候,服务端返回的是一串 JSON类型的数据,而我们使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的 JavaScript代码。因为jsonp 跨域的原理就是用的动态加载 script的src ,所以我们只能把参数通过 url的方式传递,所以jsonp的 type类型只能是get !

我们可以看上面的请求,浏览器按 F12 显示如下:

我们将这段路径单独复制出来:

http://localhost:8080/JavaWeb01/getPassWordByUserNameServlet?userName=Tom&backFunction=jQuery33107285685756141047_1532791502227&_=1532791502228

再看 Preview 页:

也就是说对于上面的JSONP 请求,其实jQuery会转化为:

< script type="text/javascript" 
         src="http://localhost:8080/JavaWeb01/getPassWordByUserNameServlet?userName=Tom&backFunction=jQuery33107285685756141047_1532791502227&_=1532791502228" >
< /script >

然后动态的去加载该 script 标签的 src 属性。

③、HttpClient 请求转发 这种方式客户端是向 JavaWeb02 项目发送请求,而不是上面的向 JavaWeb01 发送请求,然后在 JavaWeb02 的后台通过 HttpClient 将请求发送到 JavaWeb01,得到数据后返回。这种方式相当于绕过浏览器的同源机制,直接通过后端进行转发。

index.jsp 的ajax请求如下:

$.ajax({
            type:"get",
            async:false,
            url:"http://localhost:8081/JavaWeb02/ToGetPassWordServlet?userName=Tom",
            dataType:"json",
            success:function (data) {
                alert(data['passWord']);
            },
            error:function () {
                alert("error");
            }

        });

注意我们是在 JavaWeb02 项目下的index.jsp 发送请求,请求路径也是 JavaWeb02 下的 Servlet。

package com.ys.servlet;

import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * Create by YSOcean
 */
@WebServlet("/ToGetPassWordServlet")
public class ToGetPassWordServlet extends HttpServlet{
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取用户名
        String userName = req.getParameter("userName");
        CloseableHttpClient httpClient = HttpClients.createDefault();
        //创建get请求
        HttpGet hget = new HttpGet("http://localhost:8080/JavaWeb01/getPassWordByUserNameServlet?userName="+userName);
        CloseableHttpResponse httpResponse = httpClient.execute(hget);
        int code = httpResponse.getStatusLine().getStatusCode();
        if(code == 200){
            String result = EntityUtils.toString(httpResponse.getEntity());
            resp.getWriter().print(result);
        }
        httpResponse.close();
        httpClient.close();

    }
}

④、nginx 转发 原理很简单:

图片

利用nginx反向代理,将请求分发到部署到相应项目的tomcat服务器,当然也不存在跨域问题。

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 端口
    +关注

    关注

    4

    文章

    993

    浏览量

    32328
  • 浏览器
    +关注

    关注

    1

    文章

    1038

    浏览量

    35690
  • javascript
    +关注

    关注

    0

    文章

    525

    浏览量

    54080
  • 脚本
    +关注

    关注

    1

    文章

    393

    浏览量

    15011
收藏 人收藏

    相关推荐

    MDO4000系列混合分析仪应用之分析介绍

    了创新的概念-分析,利用分析,可以发现传统手段无法发现的嵌入式射频系统以及数字射频系统的疑难杂症。 MDO4000 系列混合分析仪
    发表于 07-19 07:02

    采用Nginx的反向代理解决

    40Nginx的反向代理功能解决问题
    发表于 10-10 10:58

    ajax如何克服

    如何克服ajax
    发表于 04-30 13:25

    请问如何解决Vue加入withCredentials后无法进行请求?

    Vue加入withCredentials后无法进行请求
    发表于 11-06 06:39

    如何处理好FPGA设计中时钟间的数据

    时钟处理是FPGA设计中经常遇到的问题,而如何处理好时钟间的数据,可以说是每个FPGA初学者的必修课。如果是还是在校的学生,时钟
    发表于 07-29 06:19

    如何处理好时钟间的数据呢

    时钟处理是什么意思?如何处理好时钟间的数据呢?有哪几种时钟处理的方法呢?
    发表于 11-01 07:44

    FPGA时钟处理简介

    (10)FPGA时钟处理1.1 目录1)目录2)FPGA简介3)Verilog HDL简介4)FPGA时钟处理5)结语1.2 FPGA简介FPGA(Field Programm
    发表于 02-23 07:47

    看看Stream信号里是如何做时钟握手的

    逻辑出身的农民工兄弟在面试时总难以避免“时钟”的拷问,在诸多时钟的方法里,握手是一种常见的方式,而Stream作为一种天然的握手信号,不妨看看它里面是如做
    发表于 07-07 17:25

    cdc路径方案帮您解决时钟难题

    这一章介绍一下CDC也就是时钟可能存在的一些问题以及基本的时钟处理方法。时钟的问题主
    的头像 发表于 11-30 06:29 7309次阅读
    cdc路径方案帮您解决<b class='flag-5'>跨</b>时钟<b class='flag-5'>域</b>难题

    何解决异步FIFO时钟亚稳态问题?

    时钟的问题:前一篇已经提到要通过比较读写指针来判断产生读空和写满信号,但是读指针是属于读时钟的,写指针是属于写时钟的,而异步FIFO的读写时钟
    的头像 发表于 09-05 14:29 6141次阅读

    中国联通推出了全国一体化的服务及产品

    中国联通依托特有的全国集中系统优势,针对外出务工人员、学生、候鸟族、差旅族等流动频繁的人口群体对服务的需求痛点,推出全国一体化的服务及
    发表于 12-05 09:25 4120次阅读

    关于时钟的详细解答

    每一个做数字逻辑的都绕不开时钟处理,谈一谈SpinalHDL里用于时钟处理的一些手段方法。
    的头像 发表于 04-27 10:52 4391次阅读
    关于<b class='flag-5'>跨</b>时钟<b class='flag-5'>域</b>的详细解答

    时钟电路设计总结

    时钟操作包括同步时钟操作和异步时钟操作。
    的头像 发表于 05-18 09:18 818次阅读
    <b class='flag-5'>跨</b>时钟<b class='flag-5'>域</b>电路设计总结

    FPGA时钟处理方法(一)

    时钟是FPGA设计中最容易出错的设计模块,而且一旦时钟出现问题,定位排查会非常困难,因为时钟
    的头像 发表于 05-25 15:06 2141次阅读
    FPGA<b class='flag-5'>跨</b>时钟<b class='flag-5'>域</b>处理方法(一)

    FPGA时钟处理方法(二)

    上一篇文章已经讲过了单bit时钟的处理方法,这次解说一下多bit的时钟方法。
    的头像 发表于 05-25 15:07 1121次阅读
    FPGA<b class='flag-5'>跨</b>时钟<b class='flag-5'>域</b>处理方法(二)