后台代码

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. [UE4]字体材质

    一.准备好一个字体文件,直接拖放到内容浏览器 二.创建一个名为testFontMaterial的UserWidget,添加一个TextBlock到默认的CanvasPanel.Font Family: ...

  2. oracle数据库组件列表及相关的数据字典视图

    Component Data dictionary tables and views Database V$DATABASE, V$VERSION, V$INSTANCEShared server V ...

  3. 华硕R系列的解剖图

    1.键盘底部 2.右侧光驱,右下硬盘 3.电源 4.主板 5. 6.4G内存

  4. OpenStack Mitaka/Newton/Ocata/Pike 各版本功能贴整理

    逝者如斯,刚接触OpenStack的时候还只是第9版本IceHouse.前几天也看到了刘大咖更新了博客,翻译了Mirantis博客文章<OpenStack Pike 版本中的 53 个新功能盘点 ...

  5. scrapy-items

    items定义字段名字 import scrapy class HrItem(scrapy.Item): # define the fields for your item here like: ti ...

  6. django之signal机制再探

    djangobb中的signal post_save信号调用send函数时,为什么它会对与topic.post相关的其他models进行修改?同一个信号,例如post_save(保存过后的处理),是所 ...

  7. 合批只是对CPU的优化,与GPU没有任何关系

    如题. 今天细想了下合批这个东西. 合批是节省了CPU的相关准备工作的工作量. 合批后,经过VS,PS,尝试测试,模板测试后,此时已没有了纹理,顶点,索引的概念,只剩下一个个孤立的像素,各像素间没有任 ...

  8. Fiddler 抓包工具怎么使用?怎么在Android手机端的APP抓包

    https://blog.csdn.net/loner_fang/article/details/83309266 参考这个人的微博上有fiddler主要功能使用的步骤. 序章 Fiddler是一个蛮 ...

  9. week07 13.1 NewsPipeline之 一 NewsMonitor

    我们要重构一下代码 因为我们之前写了utils 我们的NewsPipeline部分也要用到 所以我们把他们单独独立得拿出来 删掉原来的 将requirements.txt也拿出去 现在我们搬家完成 我 ...

  10. FTRL的理解

    https://blog.csdn.net/ningyanggege/article/details/81133785