[Website] Distributed cross-domain solutions

I. Overview
- 1.1 What is the cross-domain site
- 1.2 Website cross-domain error case
Second, the five kinds of cross-domain solutions for website
Third, the use JSONP to solve cross-domain website [1]
- 3.1 front-end code
- 3.2 back-end code
Fourth, the use permit cross head setting response [2]
- 4.1 front-end code
- 4.2 back-end code
Fifth, internal forwarded using HttpClient [3]
- 5.1 front-end code
- 5.2 back-end code
Sixth, the use Nginx build Gateway Interface API [4]
Seven, SpringCloud build API interface gateway [5]

I. Overview

1.1 What is the cross-domain site

Cross-domain causes: In the current website domain request, the default domain is not allowed to send other via ajax request.
The reason browser cross-domain problem arises, if the case ajax request to call third-party interfaces, if inconsistent access interfaces ajax domain name and port number to access the browser's domain name and port number, it will have cross-domain problems. (Belonging to the browser security policy) does not belong to the front cross-domain problem must be the port number and the domain name must be consistent.

1.2 Website cross-domain error case

Second, the five kinds of cross-domain solutions for website

Use jsonp solve cross-domain site
Use HttpClient internal forwarding
Use permit cross head setting response
Based on Nginx build enterprise-class API Gateway Interface
Use Zuul build micro-services API Gateway Interface

Third, the use JSONP to solve cross-domain website [1]

3.1 front-end code

 <script type="text/javascript">
        $(document).ready(function() {
        $.ajax({
            type : "GET",
            async : false,
            url : "http://127.0.0.1:8081/ajaxJsonpB",
            dataType : "jsonp",
            jsonp : "jsonpCallback",//服务端用于接收callback调用的function名的参数 
            success : function(data) {
                alert(data["errorCode"]);
            },
            error : function() {
                alert('fail');
            }
        });

    });
    </script>

3.2 back-end code

@RequestMapping(value = "/ajaxJsonpB", method = RequestMethod.GET)
    public void ajaxB(HttpServletResponse response, String jsonpCallback) throws IOException {
        JSONObject root = new JSONObject();
        root.put("errorCode", "200");
        root.put("errorMsg", "登陆成功");
        response.setHeader("Content-type", "text/html;charset=UTF-8");
        PrintWriter writer = response.getWriter();
        writer.print(jsonpCallback + "(" + root.toString() + ")");
        writer.close();
}

　　Disadvantages: post request is not supported, the code writing more complicated

Fourth, the use permit cross head setting response [2]

4.1 front-end code

<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
            type : "GET",
            async : false,
            url : "http://127.0.0.1:8081/ajaxB",
            dataType : "json",
            success : function(data) {
                alert(data["errorCode"]);
            },
            error : function() {
                alert('fail');
            }
        });
    
    });
</script>

4.2 back-end code

@RequestMapping("/ajaxB")
    public Map<String, Object> ajaxB(HttpServletResponse response) {
        //告诉浏览器可以跨域 * 代表所有域名都可以跨域 正常将这个代码应该放在过滤器中
     response.setHeader("Access-Control-Allow-Origin", "*");
        Map<String, Object> result = new HashMap<String, Object>();
        result.put("errorCode", "200");
        result.put("errorMsg", "登陆成功");
        return result;
}

Permit cross head setting response, if the actual project, which is recommended in the code filters.

Fifth, internal forwarded using HttpClient [3]

5.1 front-end code

<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
            type : "POST",
            async : false,
            url : "http://127.0.0.1:8080/forwardB",
            dataType : "json",
            success : function(data) {
                alert(data["errorCode"]);
            },
            error : function() {
                alert('fail');
            }
        });
    });
</script>

5.2 back-end code

// A项目进行转发到B项目    
@RequestMapping("/forwardB")
@ResponseBody
public JSONObject forwardB() {
    JSONObject result = HttpClientUtils.httpGet("http://127.0.0.1:8081/ajaxB");
    System.out.println("result:" + result);
    return result;
}
    
// B项目代码
    
@RequestMapping("/ajaxB")
public Map<String, Object> ajaxB(HttpServletResponse response) {
    Map<String, Object> result = new HashMap<String, Object>();
    result.put("errorCode", "200");
    result.put("errorMsg", "登陆成功");
    return result;
}

Sixth, the use Nginx build Gateway Interface API [4]

6.1 Nginx configuration

server {
    listen       80;
    server_name  127.0.0.1;
    #A项目
    location /a {
        proxy_pass   http://127.0.0.1:8080/;
        index  index.html index.htm;
    }
    #B项目
    location /b {
        proxy_pass   http://127.0.0.1:8081/;
        index  index.html index.htm;
    }
}

6.2 front-end code

<script type="text/javascript">
$(document).ready(function() {
    $.ajax({
        type : "POST",
        async : false,
        url : "http://127.0.0.1/b/ajaxB",
        dataType : "json",
        success : function(data) {
            alert(data["errorCode"]);
        },
        error : function() {
            alert('fail');
        }
    });  
});
</script>

6.3 back-end code

    @RequestMapping("/ajaxB")
    public Map<String, Object> ajaxB(HttpServletResponse response) {
        Map<String, Object> result = new HashMap<String, Object>();
        result.put("errorCode", "200");
        result.put("errorMsg", "登陆成功");
        return result;
    }

Seven, SpringCloud build API interface gateway [5]

　　Use SpringCloud Zuul build API Gateway Interface