Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Problem is introduced into

When you combine the interface with the backend students, you will often encounter the following error:

This error is caused by a cross-domain browser error. What is cross-domain?

What is cross-domain

Here, a concept is introduced: the same origin policy

This means that resources can access each other only if the protocol, domain name, or port are the same.

http://baidu.com:8000/test this link protocol is HTTP, domain name is baidu.com, port is 8000Copy the code

If one of these conditions is not met, it can cause cross-domain problems, such as

  1. The HTTP protocol is inconsistent
http://baidu.com and https://baidu.comCopy the code
  1. Inconsistent domain names
http://baidu.com and http://google.comCopy the code
  1. Port inconsistency
http://baidu.com:8000/test and http://baidu.com:8001/testCopy the code

Cross-domain problems are caused by not meeting the same origin policy, so why do browsers introduce the same origin policy?

The reason why the same-origin policy is introduced

The browser introduces the same origin policy to prevent CSRF attacks, which use users’ login status to initiate malicious requests.

If you have two sites, A and B can access each other without the same origin policy. If site A is in the login state, site B can access site A to obtain the login information of site A and initiate malicious requests.

Now that the same origin policy is in place, how do browsers intercept it?

Where cross-domain is intercepted

If the request is cross-domain, does the browser make the request? Is there a request on the server? In fact, the request has already been sent, but when the browser accepts the request, it thinks the content is unsafe and blocks the request.

As a result, you can see that a browser calling an interface generates a cross-domain error, but using the Postman tool directly to call the interface, you can get the data, which is normal.

Now that you have cross-domain, how do the front and back ends help?

Cross-domain processing scheme

1. JSONP

The principle of JSONP is to exploit

<script src="http://test.com/api?callback=jsonp"

<script>
	function jsonp(data) {
		console.log(data)
	}
</script>
Copy the code
// http://test.com/api?callback=jsonp

jsonp('test')
Copy the code

JSONP is compatible, but is limited to GET requests.

2. Proxy

Since cross-domain problems are caused by browsers, Proxy solutions solve cross-domain problems by avoiding browsers.

When we use the VUE project for development, we can start the agent in the configuration. The actual VUE project will start a Node proxy server locally. The request will be sent to the Node proxy server, which will forward the request to the target server. Because the Node proxy server and site comply with the same origin policy, cross-domain problems do not occur.

When deployed online, we can also handle cross-domain by adding a layer of proxy servers for forwarding.

3. CORS

This scheme is commonly used and recommended by me.

CORS requires back-end support, so as long as the server sets Access-Control-Allow-Origin when returning the response header, the browser allows cross-domain Access. This property indicates which domain names are accessible, and we can set the wildcard * to make all sites accessible.

When the CORS solution is used to solve the cross-domain problem, the browser will divide the request into simple request and complex request.

A simple request

A simple request is triggered when the following conditions are met

  1. The request method is as follows:
  • GET
  • HEAD
  • POST
  1. The value of content-type is the following;
  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded

Complex request

Requests that are not simple are complex.

For complex requests, the browser first issues a pre-check request, the OPTION method, to ask the server if it supports cross-domain.

If the server returns 200, indicating cross-domain support, the browser will send the actual request. So the server needs to handle OPTION requests.

4. Browser plug-ins

Plug-in address: chrome.google.com/webstore/de…

Chrome can avoid cross-domain problems by setting cross-domain headers for response headers, just like CORS, but not for the server.

This method can only be used in the development environment to facilitate debugging by the developer.

conclusion

The above is my understanding of browser cross domain, if you think it is helpful, please help to click a like + comment + favorites.