This paper solves the cross domain problem of browser

1. summary

The old saying is good ： pay attention to important points , Not greedy for temporary profits . Too greedy , Will only lose more , Contentment makes one happy .

 

Get down to business , Let's talk today How to solve the problem of browser cross domain .

 

2. Cross-domain problem

2.1 What is cross-domain

Cross domain , Simply put, the domain name of the page visited is www.a.com, And on this page Ajax Request interface , The request is www.b.com The interface of , For safety reasons , The browser does not allow this by default , It's a mistake , Prompt cross domain .

 

As for why browsers do not allow cross domain by default , What are the security risks of allowing cross domain , I won't discuss it here , This article just tells you that when you need to cross domain , How to solve cross domain problems .

 

Of course , If the page visited and the interface requested in the page are under the same domain name , There is no cross domain trouble .

 

Solving cross domain problems , front end 、 The backend needs to be configured , You can't configure only one end .

 

2.2 Use java The code to solve Back end Cross domain

Add a cross domain configuration class CrossDomainConfig, In which you configure the settings that allow cross domain access url、 Request mode 、Header etc. . The code is as follows ：

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 CrossDomainConfig{

    public CrossDomainConfig() {

    }
　　private CorsConfiguration buildConfig() {
　　　　
　　　　 //  add to cors Configuration information 
    　　CorsConfiguration corsConfiguration = new CorsConfiguration();
　　　　 corsConfiguration.addAllowedOrigin("http://localhost:8080");
    　　// *  On behalf of all url
        corsConfiguration.addAllowedOrigin("*");

        //  Set how requests are allowed 
        corsConfiguration.addAllowedMethod("*");

        //  Set allowed header
        corsConfiguration.addAllowedHeader("*");
        
        //  Set whether to send cookie Information 
        corsConfiguration.setAllowCredentials(true);

    　　return corsConfiguration;
　　}

    @Bean
    public CorsFilter corsFilter() {
        　
        //  by url Add a mapping path 
        UrlBasedCorsConfigurationSource crossDomainSource = new UrlBasedCorsConfigurationSource();
        crossDomainSource.registerCorsConfiguration("/**", buildConfig()); 
        
        //  Return to the redefined configuration 
        return new CorsFilter(crossDomainSource); 
    } 
}

 

2.3 Nginx Solve back-end cross domain

At the location of the back-end interface server Add the following configuration to the configuration .

#  Domain names that allow cross domain requests ,* On behalf of all 
add_header 'Access-Control-Allow-Origin' *;
#  Allow to bring cookie request 
add_header 'Access-Control-Allow-Credentials' 'true';
#  Allow the requested method , for example ：GET、POST、PUT、DELETE etc. ,* On behalf of all 
add_header 'Access-Control-Allow-Methods' *;
#  Allow requested header information , for example ：DNT,X-Mx-ReqToken,Keep-Alive,User-Agent etc. ,* On behalf of all 
add_header 'Access-Control-Allow-Headers' *;

 

For back-end interfaces ,Java Code and Nginx, Use one of these methods to solve cross domain problems .

 

2.3 front end Ajax To solve the cross domain

It's just a back-end solution to cross domain problems , Use Ajax The default configuration is to call the interface , The interface can be adjusted , but Cookie Cannot carry across domains , Need to be in Ajax Add the following configuration when calling ：

crossDomain:true, // Set cross domain to true
xhrFields: {
 withCredentials: true // By default , Standard cross domain requests are not sent cookie Of 
},

 

2.4 SameSite problem  

In order to prevent CSRF Attacks and user tracking , Higher versions of some browsers have been added and enabled by default SameSite The mechanism of , Strictly control cross domain portability Cookie.

Microsoft Edge and  Google Chrome The default version is enabled SameSite Mechanism .

 

SameSite In short , The browser is generating Cookie when , Added Cookie Security level of , Cross domain portability is not allowed .

There are two solutions ：

1、 The login interface is generating Cookie when , modify Cookie Of SameSite To configure , for example ： httponly; secure;SameSite=None

2、 Reverse proxy on login interface Nginx Of location Configuration is being added ：proxy_cookie_path / "/; httponly; secure;SameSite=None";

 

Be careful ： take Cookie Of SameSite Set to None The premise is , The interface access protocol must be https Of .

 

3. review

Today I talked about How to solve the problem of browser cross domain , I hope it can be helpful to everyone's work , In the next section, we will continue to talk about Vue High level grammar in , Coming soon

Welcome to help me 、 Comment on 、 forward 、 Pay more attention to ：）

Pay attention to those who follow the wind Java, It's full of dry goods , They are all practical technical articles , Easy to understand , Pick up .

 

4. Official account number

Talk to the wind chaser Java, Welcome to pay attention