Cross-origin access solution caused by separation of the frontend and backend of Spring Cloud, springcloud

Cross-origin access solution caused by separation of the frontend and backend of Spring Cloud, springcloud
Background

The pilot transformation of Spring Cloud microservices is currently trying to separate the frontend and backend.

Frontend application A (port 8080 of the Local Machine) calls the http Service published by background application B (Port 8769 of the Local Machine) and application C through the network management (Port 8082 of the local machine ..

The js Code of A is as follows:

$.ajax({            type: "POST",            async: "true",            url: "http://127.0.0.1:8769/service-B/getResInfo",            data:{resTypeId:201}            dataType:"json",            error: function (XMLHttpRequest, textStatus, errorThrown) {                alert(textStatus + "," + errorThrown);            },            beforeSend: function (XMLHttpRequest) {            },            success: function (data) {               ...            }               });

An error is reported after running:

XMLHttpRequest cannot load http: // 127.0.0.1: 8769/service-B/getResInfo. No 'access-Control-Allow-origin' header is present on the requested resource.
Origin 'HTTP: // localhost: 100' is therefore not allowed access.

Cause

A's front-end accesses application B, resulting in cross-origin.

Cross-origin access violates the same origin policy. The same origin policy stipulates that the browser's ajax can only access resources with the same origin (same domain name or IP address) as its front-end page.

That is to say, if A's front-end accesses A's back-end, it will not cross-origin ..

Solution

I tried two solutions and finally adopted solution 2 ..

Solution 1:

Add the @ CrossOrigin annotation to the called class or method to declare that it supports cross-origin access.

Origins = * indicates that all sources are allowed to be supported, you can also define specific sources, such as http://domain1.com

AllowCredentials = true indicates that Access-Control-Allow-Credentials = true is added to response.

@RequestMapping(value="/getResInfo",method = {RequestMethod.POST})@CrossOrigin(allowCredentials="true", allowedHeaders="*", methods={RequestMethod.POST}, origins="*")    public List<Map<String,Object>> getResInfo(@RequestParam(name = "resTypeId", required = false) String resTypeId){。。。}

This solution is applicable if a service only needs to be accessed across domains ..

However, because we separate the front and back ends, the front end calls cross-Origin Services. This solution requires annotations on the methods or classes corresponding to services of almost all B and C applications, not suitable.

In addition, if both service B and service C enable cross-origin access, there may be security risks because other unknown applications can also access these services ..

Solution 2:

Add the CorsFilter filter in the network management zuul. For example, add the red part of the Code directly in the startup class.

@ SpringBootApplication @ EnableZuulProxypublic class DemoZuulApplication {public static void main (String [] args) {SpringApplication. run (DemoZuulApplication. class, args) ;}@ Bean public CorsFilter corsFilter () {final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource (); final CorsConfiguration config = new CorsConfiguration (); config. setAllowCredentials (true); // allow cookies Cross-origin config. addAllowedOrigin ("*"); // The URI that allows requests to the server. * indicates that all requests are allowed .. Try to restrict the source domain, such as http: // xxxx: 8080, to reduce security risks .. Config. addAllowedHeader ("*"); // header information that can be accessed, * indicates all config. setMaxAge (18000L); // cache time (in seconds) of the pre-check request. That is, during this time period, config will no longer be prechecked for the same cross-origin request. addAllowedMethod ("*"); // method that allows request submission. * indicates that all requests are allowed. You can also set GET, PUT, and other methods separately. * config. addAllowedMethod ("HEAD"); config. addAllowedMethod ("GET"); // allows the Get Request Method config. addAllowedMethod ("PUT"); config. addAllowedMethod ("POST"); config. addAllowedMethod ("DELETE"); config. addAllowedMethod ("PATCH"); */source. registerCorsConfiguration ("/**", config); return new CorsFilter (source );}}

Because this solution is added to the network management, there is no transformation to the code of application B and application C ..

In addition, because B and C do not directly enable cross-origin access, other applications cannot access B and C services. For example, if A directly accesses B and C applications without going through the gateway, the access fails ..

SSO verification will be performed on the network management application assembly in the future to better ensure service security ..

 

Reference: http://blog.csdn.net/liuchuanhong1/article/details/62237705