Front-end cross-domain

1. What is cross-domain

So before we get to cross-domain let’s talk a little bit about what constitutes a URL and what is the same origin policy

1, the URL

http://zengfengzhou.cn/hospital/1000_0 this url of http://zengfengzhou.cn:80/hospital/1000_0 HTTP protocol zengfengzhou. Cn domain names The 80 port number, usually followed by the domain name, is separated by a colon. Browsers default to the 80 port number omit the hospital/1000_0 request path

2. Same origin policy

The same origin (ORGIN) refers to the same port number, protocol, and domain name

For example, localhost:80 is a different port number than localhost:9000 www.baidu.com is a different domain name http://localhost:3000 is different from the "protocol". If you try to access your own resources in the Baidu console, you can find that there is no error, but if you visit Taobao's resources, you can find an error, and it also indicates that there is no request header that allows cross-domain access

3, cross-domain

Depending on the same-origin policy set by the browser, data interactions between different ports, different domains, and different protocols can be cross-domain if they are not same-origin

Second, after the emergence of cross-domain restrictions

1, because Cookie, localStorage, sessionStorage are saved to the browser side, and are homologous, so these can not be accessed

2. Unable to retrieve resources (DOM in CSS, JS, HTML)

3, the most important is still unable to conduct data interaction Ajax

How to solve cross-domain

1. Use CORS

CORS in MDN explains it this way

Cross-source resource sharing (CORS) (or, more generally, cross-domain resource sharing) is an HTTP header-based mechanism that allows the server to identify Origin (domains, protocols, and ports) other than its own, so that browsers can access and load those resources.

Some of you may notice here that CORS is based on HTTTP request headers, so we can think of a way to solve cross-domain problems by simply adding cross-domain information to the HTTP request header.

My answer is: yes

I prefer to add cross-domain information on the back end so that the front end doesn’t have to be configured and just uses the interface

The back-end code handles the cross-domain global configuration class CorsConfig

@Configuration public class CorsConfig { @Bean public CorsWebFilter corsFilter() { CorsConfiguration config = new CorsConfiguration(); config.addAllowedMethod("*"); // Allow the request method config.addAllowedOrigin("*"); // Permitted request source config.addAllowedHeader("*"); / / allow the request header UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource (new PathPatternParser ()); source.registerCorsConfiguration("/**", config); return new CorsWebFilter(source); }}

2. Use JSONP

Native js
<script src="http://zengfengzhou.cn/hospital/1000_0?callback=jsoncallback"></script> function jsoncallback() { // call the callback function after the interface // concrete logic}

It appears as shown in the figure above, indicating success

Vue implemented
let url = "http://zengfengzhou.cn/hospital/1000_0"; This $json (url, {params: {a: '1' parameters, b: '2' parameters}}), then (res = > {. / / the console log (" callback function logic "); }) .catch(error => { console.log(error); })

3. Nginx reverse proxy

Personal feeling NGINX is very convenient to use, mainly is some configuration problems, want to understand the specific configuration can see the official document

Nginx assigned

In nginx. Conf configuration

server { listen 8080; # listener port number server_name localhost; # root HTML; Location / {# request http://localhost:8080, forward the request to the domain name proxy_pass http:// domain name one; Request http://localhost:8080/api} #, to forward the request to the domain name two, guarantees the request in the same domain, solve the problem of cross-domain location/API {proxy_pass http:// domain name/API; }}