后台代码

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. Linux下安装jdk8步骤详述

    作为Java开发人员,在Linux下安装一些开发工具是必备技能,本文以安装jdk为例,详细记录了每一步的操作命令,以供参考. 0.下载jdk8 登录网址:http://www.oracle.com/t ...

  2. 【oracle常见错误】oracle监听程序配置/“ORA-12541: TNS: 无监听程序”

    问题描述 在用PL/SQL Developer连接Oracle 11g时报错“ORA-12541: TNS: 无监听程序”,如下图所示.可以按照如下的步骤进行解决. 解决方案 监听程序配置 从开始菜单 ...

  3. U3D学习14-一阶段学习总结

    一.UGUI界面拖拽 1.物品类中继承以下5个接口 命名空间: UnityEngine.EventSystem; IBeingDragHandler (OnBeingDrag) IDragHandle ...

  4. 红外NEC协议

    注意: 用示波器在接收头抓的电平看起来和NEC协议刚好相反, 那是因为:HS0038B 这个红外一体化接收头,当收到有载波的信号的时候,会输出一个低电平,空闲的时候会输出高电平. 具体情况,具体分析. ...

  5. C语言 练习题

    subString #include <iostream> int subString(char* sSeek, char* sKey) { char* p = sSeek; while( ...

  6. Java double 加、减、乘、除

    double类型的数值接相加的时候,结果可能出现精度误差为此Java提供了高精度计算的方法:java.math.*里面提供了BigDecimal类 import org.junit.Test; imp ...

  7. 0429---每日习题 菲薄纳西数列 正则ip匹配

    #8.打印斐波拉契数列前n项 def fib(n): if n==1 or n==2: return 1 return fib(n-1)+fib(n-2) for i in range(1,9): p ...

  8. Fragment的粗浅理解

    Fragment: 1.它是对于Activity界面实现的一种途径,相对于已经绑定的Layout,他更轻便,更灵活,更具有自由度和可设计性. 2.Fragment的功能正如他的正文意思所言,他是一个片 ...

  9. mysql连接测试java脚本

    JDBC.java import java.io.IOException; import java.io.InputStream; import java.sql.*; import java.uti ...

  10. uname命令详解

    1.简介: uname命令用于打印当前系统相关信息(内核版本号.硬件架构.主机名称和操作系统类型等). 2.命令语法: uname (选项) 3.选项: -a或--all:显示全部的信息: -m或-- ...