前端ajax在局域网请求另一主机的后台跨域问题(解决)

1.这个方法不太妥当,不够安全,需要自己去写一个拦截器

web.xml配置指向拦截器

<filter>
        <filter-name>JsonFormat</filter-name>
        <filter-class>com.qianmo.qmyj.common.JsonFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>JsonFormat</filter-name>
        <url-pattern>*.do</url-pattern>
    </filter-mapping>
package com.qianmo.qmyj.common;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;

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

/**
 * FileName: ${NAME}
 * Author:   anpei
 * Date:     2017/5/16
 * Description:
 * History:
 */
@Component
public class JsonFilter implements Filter {
    private Logger logger = LoggerFactory.getLogger(getClass());

    public void destroy() {
    }

    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) resp;

        logger.debug("------->受理HTTP请求,方式为:" + ((HttpServletRequest) req).getMethod() + "<------");
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/json");
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT,HEAD");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers","X-Requested-With,Content-Type");
        response.setHeader("Access-Control-Allow-Credentials", "true");
//        response.addHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

//        String curOrigin = request.getHeader("Origin");
//        if (curOrigin != null) {
//            for (int i = 0; i < originProperties.length; i++) {
//                logger.debug("-------->允许跨域访问的来源是:" + originProperties[i] + "<---------");
//                if (curOrigin.equals(originProperties[i])) {
//                    response.setHeader("Access-Control-Allow-Origin", curOrigin);
//                }
//            }
//        } else { // 对于无来源的请求(比如在浏览器地址栏直接输入请求的),那就只允许我们自己的机器可以吧
//            response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1");
//        }
//        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT,HEAD");
//        request.setCharacterEncoding("UTF-8");
//        response.setCharacterEncoding("UTF-8");
//        response.setContentType("text/json");
        chain.doFilter(req, resp);
    }

    public void init(FilterConfig config) throws ServletException {

    }

}

2.还有一个办法,我在eclipse里使用,是没有问题的,不过不知道为什么在idea里总是报错,因为时间关系,我也没深究,选择了上面的解决方法,也贴在下面吧。

----------------------web.xml-------------------------------------------------
<filter>
        <filter-name>CORS</filter-name>
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>CORS</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
------------------------util工具类(CorsConfig)----------------------------------------
package com.commerce.utils;
//允许ajax跨域请求
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1
        corsConfiguration.addAllowedHeader("*"); // 2
        corsConfiguration.addAllowedMethod("*"); // 3
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); // 4
        return new CorsFilter(source);
    }
}

引入两个jar

-------------------------pom.xml-------------------------------
<dependency>
        <groupId>com.github.pagehelper</groupId>
        <artifactId>pagehelper</artifactId>
        <version>5.0.0</version>
    </dependency>

    <dependency>
        <groupId>com.thetransactioncompany</groupId>
        <artifactId>cors-filter</artifactId>
        <version>2.5</version>
    </dependency>
package com.commerce.utils;
//允许ajax跨域请求
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1
        corsConfiguration.addAllowedHeader("*"); // 2
        corsConfiguration.addAllowedMethod("*"); // 3
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); // 4
        return new CorsFilter(source);
    }
}
时间: 2024-10-24 09:37:53

前端ajax在局域网请求另一主机的后台跨域问题(解决)的相关文章

前端跨域的解决方式

前端与服务端数据交互时,涉及到跨域的一些问题.JavaScript出于安全的考虑,禁止了跨域调用其他页面的对象,也即同源策略限制了一个源(origin)中加载文本或脚本与来自其它源(origin)中资源的交互方式. 什么是跨域? 如果两个页面拥有相同的协议(protocol),端口(如果指定),和主机,那么这两个页面就属于同一个源(origin),JavaScript允许这种同源页面的数据互相通信. 带来的麻烦,以及解决方案 同源策略让JavaScript或Cookie只能访问同域下的内容,但在

统一的Ajax提交封装,一劳永逸好工具(带跨域处理)

直接上代码,核心代码的使用文末提供         //---------核心关键,大家爱护----------//         /**         * 公共:基础支撑         **/         var G = {             /**             * 统一的请求             * @parm url请求服务器地址,格式:"${contextPath }/docmanage/list"             * @parm fn回

JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对 http://store.company.com/dir/page.html 同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 1.通过jsonp跨域[解决ajax跨域] 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的

AJAX跨域的解决办法? 同步异步

1. HTTP协议的状态消息都有哪些? 1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请求失败   2. AJAX跨域的解决办法?   1.document.domain+iframe的设置 对于主域相同而子域不同的例子,可以通过设置document.domain的办法来解决. 具体的做法是可以在http://www.a.com/a.html和http://script.a.com/b

AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法?

ajax是异步的 JavaScript 和 XML.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 交互流程: 1--启动  获取XMlHttpRequest对象             2--open 打开url通道,并设置异步传输              3--send 发送数据到服务器             4--服务器接受数据并处理,处理完成后返回结果              5--客户端接收

ajax跨域终极解决办法!

在使用 ajax 的时候,往往需要通过 ajax 跨域请求一些? 但是 XMLHTTPRequest 是不支持跨域的,所以产生了 JSONP 这个东西来解决跨域,当然解决跨域的方式有很多种.... 第一种解决跨域: <script type='text/javascript' > (function(window){ //AJAX获取界面信息 $(function(){ $.ajax({ // 豆瓣API接口 url:'http://api.douban.com/v2/movie/in_the

【转】JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对http://store.company.com/dir/page.html 同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 1.通过jsonp跨域 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不

Jquery跨域请求和.Net后台跨域请求

一年一度抢火车票的季节又到了,作为一个程序员,在研究12306提供的接口时遇到的一些跨域的问题.以查询余票接口为例.第一种方法:  $.ajax({                url: 'https://kyfw.12306.cn/otn/leftTicket/queryT?leftTicketDTO.train_date=2015-02-05&leftTicketDTO.from_station=SZH&leftTicketDTO.to_station=SHH&purpose

前端跨域请求原理及实践

前端跨域请求原理及实践 2017-03-03 前端大全 (点击上方公众号,可快速关注) 作者:高鹏 tingandpeng.com/2016/09/05/前端跨域请求原理及实践/ 如有好文章投稿,请点击 → 这里了解详情 一. 跨域请求的含义 浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本(如 JavaScript)对不同域的服务进行跨站调用. 一般的,只要网站的 协议名protocol. 主机host. 端口号port 这三个中的任意一个不同,网站间的数据请求与传输便构成了跨域调用.