后台代码

package edu.nf.ch01.server;

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;

/**

 * @Author Eric

 * @Date 2018/12/3

 */

@WebServlet("/login")

public class CorsServer extends HttpServlet {

    @Override

    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

/*

        //允许跨域访问，通过response对象写回一些跨域访问的头信息

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

        //允许请求的方法

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

*/

        String userName = req.getParameter("userName");

        String password = req.getParameter("password");

        resp.setContentType("text/html;charset=utf-8");

        if("admin".equals(userName) && "123".equals(password)){

            resp.getWriter().println("success");

        }else{

            resp.getWriter().println("fail");

        }

    }

}

html

<!DOCTYPE html>

<html>

    <meta charset="utf-8">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">

    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>

    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>

    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>

    <head>

        <a class="button button-link button-nav pull-left" href="/demos/card" data-transition='slide-out'>

              <span class="icon icon-left"></span>

              返回

        </a>

        <h1 class="title">我的App</h1>

    </head>

    <body>

        <nav class="bar bar-tab">

            <a class="tab-item active" href="#">

              <span class="icon icon-home"></span>

              <span class="tab-label">首页</span>

            </a>

            <a class="tab-item" href="#">

              <span class="icon icon-me"></span>

              <span class="tab-label">我</span>

            </a>

            <a class="tab-item" href="#">

              <span class="icon icon-star"></span>

              <span class="tab-label">收藏</span>

            </a>

            <a class="tab-item" href="#">

              <span class="icon icon-settings"></span>

              <span class="tab-label">设置</span>

            </a>

          </nav>

        <div class="content">

              <div class="list-block">

                  <form id="f1">

                    <ul>

                      <!-- Text inputs -->

                      <li>

                        <div class="item-content">

                          <div class="item-inner">

                            <div class="item-title label">Name</div>

                            <div class="item-input">

                              <input type="text" name="userName" placeholder="Your name">

                            </div>

                          </div>

                        </div>

                      </li>

                      <li>

                        <div class="item-content">

                          <div class="item-inner">

                            <div class="item-title label">Password</div>

                            <div class="item-input">

                              <input type="password" name="password" placeholder="password">

                            </div>

                          </div>

                        </div>

                      </li>

                    </ul>

                </form>

              </div>

              <div class="content-block">

                <div class="row">

                  <div class="col-50"><a href="#" class="button button-big button-fill button-danger">取消</a></div>

                  <div class="col-50"><a href="#" id="login" class="button button-big button-fill button-success">登陆</a></div>

                </div>

              </div>

        </div>

    </body>

    <script>

        $(function(){

            $("#login").on("click",function(){

                    $.ajax({

                    type:"post",

                    url:"http://localhost:8080/login",

                    data:$("#f1").serialize(),

                    success:function(result){

                        alert(result);

                    }

                });

            });

        });

    </script>

</html>

可以用Filter-CorsFilter类

package edu.nf.ch01.filter;

import javax.servlet.*;

import javax.servlet.annotation.WebFilter;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

/**

 * @author wangl

 * @date 2018-12-03

 */

@WebFilter("/*")

public class CorsFilter implements Filter {

    @Override

    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {

        HttpServletResponse resp = (HttpServletResponse) servletResponse;

        //允许跨域访问，通过response对象写回一些跨域访问的头信息

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

        //允许请求的方法

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

        //放行

        filterChain.doFilter(servletRequest, servletResponse);

    }

    @Override

    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override

    public void destroy() {

    }

}

servlet跨域的更多相关文章

  1. 详解Jquery和AngularJs，Servlet中jsonp解决跨域问题(转)

    众所周知,jsonp可以解决跨域问题,下面是我在查阅资料和实际项目使用后的一些总结. Jquery中jsonp的使用 //myUrl = "http://localhost:8090/api ...

  2. 利用servlet做转发，实现js跨域解决同源问题

    做前端开发,避免不了跨域这个问题,跨域具体什么概念,不赘述,博客里太多.简单说下,我们用js发请求,不管post还是get,如果发请求的对象和当前web页面不在同一域名下,浏览器的同源策略会限制发请求 ...

  3. servlet 过滤器实现 请求转发（跳转）；跨域转发请求；tomcat 环境下。

    一般的文章都有 文本内容 和图片的.我想实现一个图片服务(或服务器)来单独处理图片逻辑,和文章处理逻辑分离.于是我想到一个办法,来尝试. 背景: 1. 假如文章的处理在web App,就叫web1 吧 ...

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

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

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

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

  6. servlet处理跨域请求

    前言 我们要做的是让在一个不在当前项目文件夹的前端页面发送Ajax请求,由一个远程servlet处理 代码 创建一个web工程 导入所需的jar-> servlet-api.jar fastjs ...

  7. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  8. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  9. session,ajax 跨域cookie

    什么是Session, 什么是Cookie? Session是由应用服务器维持的一个服务器端的存储空间,用户在连接服务器时,会由服务器生成一个唯一的SessionID,用该SessionID为标识符来 ...

随机推荐

  1. toString 和new String()区别

    public class NewStringTestDemo { public static void main(String[] args) { String s = "你好"; ...

  2. requests_html 使用

    安装 pip install requests-html #2种方式爬取 博客园from requests_html import HTMLSession session=HTMLSession() ...

  3. 权限管理demo-Http请求前后监听工具

    工具作用: 1. 输出每次请求的参数 2. 接口的请求时间 package com.mmall.common; import com.mmall.util.JsonMapper; import lom ...

  4. 关于连接oracle工具plsql的一些使用

    上面图片是打开客户端PL\SQL devepoper的连接内容 进入页面后就可以进行相关的sql语句编写了 将几个结果放入一个表中 select 30+30 as 结果 from dual union ...

  5. i++ 是线程安全的吗？

    相信很多中高级的 Java 面试者都遇到过这个问题,很多对这个不是很清楚的肯定是一脸蒙逼.内心肯定还在质疑,i++ 居然还有线程安全问题?只能说自己了解的不够多,自己的水平有限. 先来看下面的示例来验 ...

  6. android 开发 View _9_ 实现渐变功能(直线与圆形)

    参考博客:https://blog.csdn.net/iispring/article/details/50500106/ android颜色渐变的分类有: LinearGradient线性渐变 线性 ...

  7. mysql实现IP与整形互转

  8. python——列表入门

    学习列表先分析一段程序: list = ['zx', 'xkd', 1997, 2018] list1=list+[1,2,3]#列表拼接 list2=[list,list1] print('嵌套的列 ...

  9. tcp的发送端一个小包就能打破对端的delay_ack么？

    3.10内核,反向合入4.9的bbr. 最近分析bbr的时候,收集了线上的一些报文,其中有一个疑问一直在我脑海里面,如下: 本身处于delay_ack状态的客户端,大概40ms回复一个delay_ac ...

  10. CentOS6.5搭建OpenVas完全搭建手册（搭建过程总结及小记）

    一.OpenVAS 介绍 1.关于OpenVAS OpenVAS(Open Vulnerability Assessment System)是一套开源的漏洞扫描系统,早期Nessus 是其中一个最流行 ...