Cross-domain access support (Spring Boot, Nginx, browser)

cross-domain access support (Spring Boot, Nginx, browser)

What is cross-domain.

Cross-domain refers to the browser's inability to execute scripts for other Web sites. It is caused by the browser's homologous policy and is the security restrictions imposed by the browser.

This article turns from: Public number (a Li Springcloud) one, Spring boot cross-domain configuration

Our backend uses spring Boot. Spring Boot cross-domain is very simple, just write the following code.

@Configuration
public class Customcorsconfiguration {
Private Corsconfiguration Buildconfig () {
Corsconfiguration corsconfiguration = new Corsconfiguration ();
Corsconfiguration.addallowedorigin ("*");
Corsconfiguration.addallowedheader ("*");
Corsconfiguration.addallowedmethod ("*");
return corsconfiguration;
}

@Bean
Public Corsfilter Corsfilter () {
Urlbasedcorsconfigurationsource Source = new Urlbasedcorsconfigurationsource ();
Source.registercorsconfiguration ("/**", Buildconfig ());
return new Corsfilter (source);
}
}

The code is very simple, do not repeat. The code is tested in spring Boot 1.5.4. Second, Nginx cross-domain Configuration

One day, we will use the Spring boot application with Nginx reverse proxy. The demand for front-end cross-domain requests is not reduced, thus.

Nginx cross-domain is also relatively simple, just add the following configuration.

Location/{
Proxy_pass http://localhost:8080;
if ($request _method = ' OPTIONS ') {
Add_header ' Access-control-allow-origin ' *;
Add_header ' Access-control-allow-methods ' GET, POST, OPTIONS ';
Add_header ' Access-control-allow-headers ' Dnt,x-customheader,keep-alive,user-agent,x-requested-with, If-modified-since,cache-control,content-type,content-range,range,token ';
Add_header ' Access-control-max-age ' 1728000;
Add_header ' Content-type ' text/plain; Charset=utf-8 ';
Add_header ' content-length ' 0;
return 204;
}
if ($request _method = ' POST ') {
Add_header ' Access-control-allow-origin ' *;
Add_header ' Access-control-allow-methods ' GET, POST, OPTIONS ';
Add_header ' Access-control-allow-headers ' Dnt,x-customheader,keep-alive,user-agent,x-requested-with, If-modified-since,cache-control,content-type,content-range,range,token ';
Add_header ' Access-control-expose-headers ' Dnt,x-customheader,keep-alive,user-agent,x-requested-with, If-modified-since,cache-control,content-type,content-range,range,token ';
}
if ($request _method = ' GET ') {
Add_header ' Access-control-allow-origin ' *;
Add_header ' Access-control-allow-methods ' GET, POST, OPTIONS ';
Add_header ' Access-control-allow-headers ' Dnt,x-customheader,keep-alive,user-agent,x-requested-with, If-modified-since,cache-control,content-type,content-range,range,token ';
Add_header ' Access-control-expose-headers ' Dnt,x-customheader,keep-alive,user-agent,x-requested-with, If-modified-since,cache-control,content-type,content-range,range,token ';
}
}

Where: Add_header ' access-control-expose-headers ' must add the header you brought with your request. For example, "Token" in this example is actually the front end passed to the back end. If you do not remember, the browser debugger will have a detailed description.

Reference Document: Https://enable-cors.org/server_nginx.html

B.T.W, Alibaba Cloud document description to Nginx can also be cross-domain via crossdomain.xml configuration file: https://helpcdn.aliyun.com/knowledge_detail/41123.html, But I did not use this approach.

Third, browser settings cross-domain

Chrome, Firefox itself can be configured to support cross-domain requests.

Chrome cross-domain: Reference document: Http://www.cnblogs.com/laden666666/p/5544572.html

Firefox cross-domain: Reference document: https://segmentfault.com/q/1010000002532581/a-1020000002533699

Note: Through the browser settings to achieve cross-domain play, the individual does not have a pro-test.