前言

我们要做的是让在一个不在当前项目文件夹的前端页面发送Ajax请求，由一个远程servlet处理

代码

  • 创建一个web工程

  • 导入所需的jar-> servlet-api.jar fastjson.jar

  • 编写前端页面

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <input type="button" value="get" id='get'>

    <input type="button" value="POST" id='post'>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

    <script>

        let data = {

            name: '狗剩',

            age: 20

        }

        $("#get").on('click', function() {

            $.ajax({

                type: 'get',

                contentType:'application/json',  //data发送方式

                url: 'http://localhost/TestServlet',   //发送跨域请求

                data: data,

                success: (res) => {

                    console.log("res:", res)

                }

            })

        })

        $("#post").on('click', function() {

            $.ajax({

                type: 'post',

                contentType:'application/json',

                url: 'http://localhost/TestServlet',

                data: JSON.stringify(data),

                success: (res) => {

                    console.log("res:", res)

                }

            })

        })

    </script>

</body>

</html>
  • 配置一个Filter处理跨域请求
import javax.servlet.*;

import javax.servlet.http.HttpFilter;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

public class Filter extends HttpFilter {

    @Override

    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {

        //设置跨域请求

        System.out.println("Filter 过滤器 执行 了");

        HttpServletRequest request = (HttpServletRequest)req;

        HttpServletResponse response = (HttpServletResponse)resp;

        //允许跨域主机地址

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

        //允许跨域方法

        response.setHeader("Access-Control-Allow-Methods", "POST, DELETE,PUT,GET,OPTIONS");

        //缓存时间

        response.setHeader("Access-Control-Max-Age", "3600");

        //允许跨域的请求头

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

        //是否携带cookie

        response.setHeader("Access-Control-Allow-Credentials", "true");

        //允许放行

        chain.doFilter(request, response);

    }

}
  • 编写servlet处理请求
import com.alibaba.fastjson.JSON;

import javax.servlet.ServletException;

import javax.servlet.ServletInputStream;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.BufferedReader;

import java.io.IOException;

import java.io.InputStreamReader;

import java.util.Map;

public class TestServlet extends HttpServlet {

    @Override

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        System.out.println("请求已到达-> post");

        request.setCharacterEncoding("utf-8");

        ServletInputStream inputStream = request.getInputStream();

        BufferedReader br = new BufferedReader(new InputStreamReader(inputStream));

        StringBuilder sb = new StringBuilder();

        String str = null;

        while((str = br.readLine()) != null) {

            sb.append(str);

        }

        System.out.println(sb.toString());

        //转为map集合

		Map parseObject = JSON.parseObject(sb.toString(), Map.class);

        System.out.println("parseObject:" + parseObject);

    }

    @Override

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        System.out.println("请求已到达-> get");

        request.setCharacterEncoding("UTF-8");

        String name = request.getParameter("name");

        int age = Integer.parseInt(request.getParameter("age"));

        System.out.println("name:" + name + ", age:" + age);

    }

}
  • 配置web.xml
<filter>

        <filter-name>Filter</filter-name>

        <filter-class>Filter</filter-class>

    </filter>

    <filter-mapping>

        <filter-name>Filter</filter-name>

        <!-- 配置需要进行跨域的接口 -->

        <url-pattern>/*</url-pattern>

    </filter-mapping>

    <servlet>

        <!--servlet名 -->

        <servlet-name>Test</servlet-name>

        <!-- servlet路径，包名.类名 -->

        <servlet-class>TestServlet</servlet-class>

    </servlet>

    <servlet-mapping>

        <!--servlet映射，必须与servlet-name同名 -->

        <servlet-name>Test</servlet-name>

        <!--浏览器中输入的访问该servlet的url-->

        <url-pattern>/TestServlet</url-pattern>

    </servlet-mapping>
  • 部署项目，启动服务器，测试跨域请求

结语

//需要注意的是前端Ajax请求的url

 url: 'http://localhost/TestServlet'

//servlet的web.xml配置

<url-pattern>/TestServlet</url-pattern>

//localhost后面的地址和xml配置的地址一致即可

servlet处理跨域请求的更多相关文章

  1. 巧妙利用JQuery和Servlet来实现跨域请求

    在网上看到很多的JQuery跨域请求的文章,比较有意思.这里我发表一个Servlet与JQuery配置实现跨域的代码,供大家参考.不足之处请指教 原理:JavaScript的Ajax不可以跨域,但是可 ...

  2. JQuery和Servlet来实现跨域请求

    在网上看到很多的JQuery跨域请求的文章,比较有意思.这里我发表一个Servlet与JQuery配置实现跨域的代码,供大家参考.不足之处请指教 原理:JavaScript的Ajax不可以跨域,但是可 ...

  3. [转]Ajax跨域请求

    一.编一个服务器端servlet @RequestMapping("/haha") @ResponseBody String haha(String haha, HttpServl ...

  4. 实现跨域请求jsonp方式

    原理:http://madong.net.cn/index.php/2012/12/368/ 调用端: $.getJSON("http://192.168.220.85:8001/esb/a ...

  5. javascript跨域请求RESTful Web Service

    跨域请求RESTful Web Service 当我们用js请求RESTful Web Service的时候,通常会出现跨域无法访问的问题,也就是无法正常得到我们要的值.jsonp是个解决问题的方法. ...

  6. 有关Ajax跨域请求的解决方案

    前言 最近博主在赶项目进度.所以微信二次开发那边的博文一直没有更新.后续时间会慢慢记录这个学习历程的.来年公司要开发微信小程序.到时也会记录一下历程. 闲话少说,今天在工作中遇到了SpringMVC接 ...

  7. Spring Boot Web应用开发 CORS 跨域请求支持：

    Spring Boot Web应用开发 CORS 跨域请求支持: 一.Web开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS等等CORS与JSONP相比 1. JSONP只能实现 ...

  8. SpringMVC处理跨域请求时的一个注意事项

        由于公司对SpingMVC框架里面的东西进行了扩展,在配置SpringMVC时没有使用<mvc:annotation-driven>这个标签.而且是自己手动来配置HandlerMa ...

  9. spring mvc \ spring boot 允许跨域请求 配置类

    用@Component 注释下,随便放个地方就可以了 package com.chinaws.wsarchivesserver.core.config; import org.springframew ...

随机推荐

  1. VScode中LeetCode插件无法登录的情况

    VScode中LeetCode插件无法登录的情况 一直提示账户和密码无效,不知道什么问题. 后来发现是设置问题 在插件中找到leetcode 右键,点击setting 在界面里找到这里,将leetco ...

  2. 【数论】A%B Problem luogu-1865

    题目描述 让你输出区间内的素数的个数 分析 预处理筛法,在随便搞一下就好了. AC代码 #include <bits/stdc++.h> using namespace std; #def ...

  3. java 日期字符串互相转换

    一.把日期转换成字符串 //获取当前时间  Date date = new Date();   //打印date数据类型  System.out.println(date.getClass().get ...

  4. Python自动化测试面试题-Redis篇

    目录 Python自动化测试面试题-经验篇 Python自动化测试面试题-用例设计篇 Python自动化测试面试题-Linux篇 Python自动化测试面试题-MySQL篇 Python自动化测试面试 ...

  5. 百度地图API基本使用（一）

    本文系作者 chaoCode原创,转载请私信并在文章开头附带作者和原文地址链接. 违者,作者保留追究权利. 前言 由于最近项目有需要,所以最近开始研究百度地图API的使用,简单的介绍一下百度地图Jav ...

  6. vulnhub-DC:7靶机渗透记录

    准备工作 在vulnhub官网下载DC:7靶机DC: 7 ~ VulnHub 导入到vmware,设置成NAT模式 打开kali准备进行渗透(ip:192.168.200.6) 信息收集 已经知道了靶 ...

  7. js hook

    //cookie hook (function () { 'use strict'; var cookie_cache = document.cookie; Object.defineProperty ...

  8. [WesternCTF2018]shrine(SSTI+过滤)

    记一道存在过滤的模板注入的题.直接给源代码 import flask import os app = flask.Flask(__name__) app.config['FLAG'] = os.env ...

  9. Vue+SpringBoot前后端分离中的跨域问题

    在前后端分离开发中,需要前端调用后端api并进行内容显示,如果前后端开发都在一台主机上,则会由于浏览器的同源策略限制,出现跨域问题(协议.域名.端口号不同等),导致不能正常调用api接口,给开发带来不 ...

  10. 使用Freemarker导出Word文档（包含图片）代码实现及总结

    .personSunflowerP { background: rgba(51, 153, 0, 0.66); border-bottom: 1px solid rgba(0, 102, 0, 1); ...