I. What is cross-domain?

Cross-domain is the result of the browser’s same origin policy. If one protocol, domain, or port is inconsistent, cross-domain is generated.

Ii. Cross-domain examples?

Once we understand the concept of cross-domain, we can solve it and simulate the cross-domain situation. We use Node to create back-end servers and write related interfaces. For those of you who don’t know node, take a look at node.js from zero to one: Getting your first taste of the API

Write a POST request:

Using Postman to tune this interface, it worked.

We then create a VUE project to syndicate and see that the request is not returned.

If you want to test with postman, you can do so. If you want to test with Postman, you can do so.

It’s also clear that cross-domain is the behavior of the browser, not the behavior of the server, because you actually made a request in the browser, and the server received the request and returned the data. The reason why there is no data received here is because the browser intercepted the data, so you can not receive the data returned by the server.

Common cross-domain solutions?

1. Set CROS to allow cross-domain in the request header on the server side

CORS (Cross-Origin Resource Sharing) is a system that consists of a series of transmitted HTTP headers that determine whether the browser prevents front-end JavaScript code from getting a response to a cross-domain request.

By default, the same-origin security policy prevents cross-domain access to resources. But CORS gives Web servers the option to allow cross-domain requests to access their resources.

How to solve this problem, students who are not good at English, let’s copy this error into the translation, translation is also a tool I often use. I admit my English is not good, but I have tools to solve my problems.

The ‘Access Control Allow Origin’ header does not exist on the requested resource, so the solution is to set CROS to Allow cross-domain in the request header at the back end. (Note that get requests are not set in the code, because there are no cross-domain issues with GET requests. For example, you can access the address bar of the browser directly, using Ajax. I won’t show you here.)

Var app = express(); behind

Request again in the front end project, and we find that it works, so we have solved the cross-domain problem.

2. Front-end use proxy proxy to solve cross-domain (Node forward proxy)

Earlier we talked about how the back end can set CROS in the request header to allow cross-domain. We commented out the code that just set cross-domain problems on the server side to reproduce cross-domain problems again. In actual projects, for example, most of the projects in the market use vUE or React technology stack. If the back-end is not solved, or the back-end forgets to solve, do we have to go to the back-end solution? The same engineers, why to ask for back-end solutions? As a front-end engineer, we also have our own solution, which is to use proxy to solve the cross. Here vue2 project is taken as an example.

① Build the configuration file vue.config.js in the front end first, and then configure the code to solve the cross-domain.

2. Configure baseURL in request.js.

3 Restart front-end services.

This is important because it is a configuration file and will not take effect if you do not restart the service. Otherwise, you have to fix it, but you have to worry about why not at the code level?

④ Display effect

Request path after proxy:

Request parameters:

Request result:

These are the common cross-domain solutions. I have demonstrated the front-end solution and the back-end solution respectively. In daily projects, we use these two solutions the most.

Cross-domain solutions include the following:

3.Nginx reverse proxy

4.JSONP

5.Websocket

6.window.postMessage

7.document.domain + Iframe

8.window.location.hash + Iframe

9.window.name + Iframe

10. Cross-domain enabled browser (Ultimate solution)

These several schemes, we can understand. If you are interested, you can read this article by other big guys. 10 cross-domain solutions (with the ultimate trick), that’s all for today’s sharing.

Previous good articles of the author:

How to subcontract wechat applets?

Front-end performance optimization, how to improve the first screen loading speed?

Front-end technology is changing fast, the era of VUE3.0 has arrived…