【实战经验】ajax跨域处理nginx解决方案一

一、新建项目futureOne

新建项目过程略

实现内容：一个包含两个不同域名请求的页面，如下：

项目后端代码如下：代码依然是框架SSM。

@Controller
@RequestMapping(value = "/b")
public class BMvc {

    @RequestMapping(value = "/helloKitty")
    @ResponseBody
    public String helloKitty(HttpServletRequest request) {
        return "kittyCat";
    }

    @RequestMapping("/more")
    public ModelAndView more(HttpServletRequest httpServletRequest, HttpServletResponse resp) throws Exception {
        return new ModelAndView("more");
    }

}

项目前端代码如下：more.vm

    
    
    


    发生本域more请求
    发生跨域jump请求
    
    

more.js

function more() {
    $.ajax({
        type: "POST",
        url: "/b/helloKitty",
        dataType: "json",
        success: function(re){
            // var result = JSON.parse(re);
            console.log(re);
        },
        error: function(result){
            // alert(result.retdesc);
        }
    });
}

jump.js

function jump() {
    $.ajax({
        type: "POST",
        url: "http://localhost:8081/a/helloDog",
        success: function(re){
            // var result = JSON.parse(re);
            console.log(re);
        },
        error: function(result){
            // alert(result.retdesc);
        }
    });
}

注意：此处为后续埋了个伏笔/b，controller这么写无可厚非。但是js中请求特别作了mapping映射。看原本目录结构如下。

正常我们只需要${rc.contextPath}/js/more/jump.js不需要加上一层/b就够了。为此我特殊处理mapping如下。

二、新建项目futureTwo

新建项目过程略

项目后端代码如下：此处仅仅写了一个ajax请求如下

@Controller
@RequestMapping(value = "/a")
public class HelloCtrl {
    @RequestMapping(value = "/helloDog")
    @ResponseBody
    public String helloKitty(HttpServletRequest request) {
        return "kittyDog";
    }
}

三、配置tomcat服务器：

本机对两个项目配置tomcat服务器端口号，分别为futureOne（8082），futureTwo（8081）。

其中遇到一系列问题，总归可以总结为没配好tomcat服务器。

1）、futureOne（8082）如下图。

2）、futureTwo（8081）如下图。

3）同时启动两个服务：请求futureOne页面more.vm。http://localhost:8082/b/more

1》点击本域请求。

2》点击跨域请求。

发现helloDog请求跨域，浏览器报错。

Nginx解决方案：

0、修改项目futureOne的前端代码如下：将之前的跨域请求改为同域名下请求，通过/a /b来判断转发到不同端口。

function jump() {
    $.ajax({
        type: "POST",
        url: "/a/helloDog",
        success: function(re){
            // var result = JSON.parse(re);
            console.log(re);
        },
        error: function(result){
            // alert(result.retdesc);
        }
    });
}

1、配置Nginx：

server{
	listen 80;
	server_name b.com;
	location /a{
	proxy_pass http://127.0.0.1:8081;
}
	location /b{
	proxy_pass http://127.0.0.1:8082;
}
}

2、配置Host：因为本机nginx所以域名直接配成本机地址，使用本机nginx转发。

127.0.0.1 b.com

3、重启配置：

sudo nginx -c /usr/local/etc/nginx/nginx.conf

sudo nginx -s reload

4、执行测试请求：http://b.com/b/more

在此分别

1》点击本域请求。

2》点击跨域请求。

发现不再出现跨域提醒，因为现在都归属与同一域名b.com下。