IDEA社区版新建web项目及HTTP跨域请求

IDEA社区版创建Java web项目

 这篇文章主要分享下 HTTP 跨域请求的 demo,关于IDEA 创建 java web 项目只记录与新建普通项目相比,建 web 项目需要关注的细节。

  1. 在以下页面添加"archetypeCatalog : internal"

    添加 archetypeCatalog = internal 的原因是 maven 创建项目时需要从http://repo.maven.apache.org/maven2/archetype-catalog.xml下载项目原型信息,因为从 maven 中央仓库下载 archetype-catalog.xml 文件很慢,非常慢所以添加此属性。通常 archetypeCatalog 属性的值有三种:internal——maven-archetype-plugin内置的,local——本地的,位置为~/.m2/archetype-catalog.xml,remote——指向Maven中央仓库的Catalog。

  2. 将生成的项目目录结构调整为下图

    采用这种目录格式主要是为了规范 war 包中目录格式

  3. 在 web.xml 中添加以下图片中内容

    上边配置作用是提供开发时使用的 servlet-api.jar 包(<scope>provided</scope> 表示打 war 包时不会打进 war 包)。下边配置作用是使用 maven 中 tomcat 插件将 tomcat 集成到项目中,这样好处是在不同平台中无需配置 tomcat 就可以运行 web 项目。

HTTP跨域请求

实现跨域请求通常有 4 种方法:JSONP,空 iframe 加 form,CORS 和代理,本文使用 CORS 方式实现。

Cross-origin resource sharing (CORS)是一个允许在网页中使用 javascript AJAX 向其他不同域发请求。由于浏览器的同源策略,这种请求是被禁止的。CORS 的实现通过添加指定的 HTTP 头来告诉浏览器下载的网页应该允许向给定的/所有域发起请求。CORS 中的 preflight request,preflight request 是一个CORS请求,用于检查CORS协议能不能被其他域接受。这个CORS请求在原有请求头上添加 Access-Control-Request-Method 和 Access-Control-Request-Headers 两个请求头。

此处使用过滤器的方式来实现跨域请求,以下为 demo 代码。

package com.gao.filter;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class CORSFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        System.out.println("CORSFilter HTTP Request: " + request.getMethod());

        HttpServletResponse response = (HttpServletResponse) servletResponse;
        //Authorize (allow) all domains to consume the content
        response.addHeader("Access-Control-Allow-Origin", "http://mail.newtouch.cn");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.addHeader("Access-Control-Allow-Methods", "GET, OPTIONS, HEAD, PUT, POST");

        if (request.getMethod().equals("OPTIONS")) {
            response.setStatus(HttpServletResponse.SC_ACCEPTED);
        }

        filterChain.doFilter(request, response);
    }

    @Override
    public void destroy() {

    }
}

以上代码中 Access-Control-Allow-Origin 的值为 http://mail.newtouch.cn。若值为 * 会报错。

测试用 servlet

package com.gao.servlets;

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

public class HelloServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        PrintWriter writer = resp.getWriter();
        writer.append("<html><br><head></head><br><body><br>");
        writer.append("<h1>Hello, Gaobl</h1><br/>");
        writer.append("</body><br><html>");
        writer.flush();
    }
}

web.xml 配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
        http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">

  <filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>com.gao.filter.CORSFilter</filter-class>
  </filter>

  <filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

  <servlet>
    <servlet-name>hello</servlet-name>
    <servlet-class>com.gao.servlets.HelloServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>hello</servlet-name>
    <url-pattern>/hello</url-pattern>
  </servlet-mapping>
</web-app>

项目启动后,在浏览器中打开一个网站(非 HTTPS 协议),打开开发者模式(按 F12),在控制台(console)中输入以下代码

(function loadXMLDoc() {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.timeout = 3000;
    xmlHttp.ontimeout = function(event) {console.log('请求超时');};
    xmlHttp.open('GET', 'http://10.126.118.83:9090/myweb/hello', true);
    xmlHttp.withCredentials = true;
    xmlHttp.send();
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            console.log(xmlHttp.responseText);
        } else {
            console.log(xmlHttp.statusText);
        }
    }
})();

回车后显示如下

报的错是提示 servlet 中返回的 html格式不正确

以上就是一个小 demo。

参考文章:

https://segmentfault.com/a/1190000015597029?utm_source=tag-newest (为什么跨域及常见跨域方法)https://www.cnblogs.com/zhanghengscnc/p/8449894.html (Java web 工程目录结构)https://howtodoinjava.com/spring5/webmvc/spring-mvc-cors-configuration/

https://blog.csdn.net/qq_35720307/article/details/83616682

https://www.jianshu.com/p/d95d0b1b6975

https://www.cnblogs.com/hihtml5/p/6305804.html

发布了35 篇原创文章 · 获赞 14 · 访问量 14万+

猜你喜欢

转载自blog.csdn.net/U___U/article/details/98762447