“This article has participated in the call for good writing activities, click to view: the back end, the big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!”

In the front-end world, cross-domain refers to the fact that browsers allow cross-domain requests to be sent to the server, thereby overcoming the limitation that Ajax can only be used synonymously. The same origin policy is a convention, and it is the most basic and core security function of the browser. Without this policy, the browser is vulnerable to attacks. Same-origin indicates that the protocol, domain name, and port are the same. Even if two different domain names point to the same IP address, they cannot be same-origin. The same origin policy exists only in the browser, but not in the server. Therefore, if you encounter an address that requires cross-domain request, you can forward it to the server and entrust the server to request it.

I. Solutions to cross-domain problems encountered in actual development

Let’s start with a simple example. First let’s look at the error message caused by cross-domain:

Open the Vue project and find the index.js file in config folder. Then go to proxyTable and add the following code snippet:

ProxyTable: {['/ Java/Mgr-auth ']: {// Replace proxy address name target: 'http://dev-cloud.bc.com/mgr-auth', // proxy address changeOrigin: Can true, / / cross-domain pathRewrite: {[' ^ / Java/MGR - auth] : "', / / rewrite interface, remove/Java/MGR - auth}}}Copy the code

After setting, restart the service and restart the project according to the actual situation:npm run serveOr is itnpm run dev.

After restarting the project, Settings are made in interface encapsulation and invocation, and the interface is finally accessible and the cross-domain problem is resolved.

Two, the common cross-domain situation

There are six common cross-domain cases that are distinguished by URL links: ① Same domain name, different port; ② Same domain name, different file or path; ③ The same domain name, different agreement; ④ The domain name and the domain name correspond to the same IP address. ⑤ The main domain name is the same, but the subdomain name is different; ⑥ Different domain names.

Summary of cross-domain solutions

To solve the cross-domain problem, there are generally three ways to solve it: ① Front-end project configuration proxy; ② Configure cross-domain access on the server. ③ Use Chrome extensions.

1. Front-end project configuration proxy method to solve cross-domain problems

The cross – domain problem is solved by configuring proxy for front-end project. For details, refer to the case at the beginning of this article.

2. The server can configure cross-domain access to solve the cross-domain problem

This needs to be configured on the server side. The specific operation is designed in the background, which is not detailed here.

3. Solve cross-domain problems through Chrome extensions

Allow CORS: access-Control-Allow-Origin involves qiang, so Allow CORS: access-Control-Allow-Origin can be used to search with Internet Access.

4. Types of agents

There are four common types of proxy: (1) basic proxy; ② Rewrite path proxy; ③ HTTPS proxy; ④ Proxies requests to the same destination.

1. An instance of a basic proxy

Module. exports = {dev: {proxy: {'/ API ': 'http://localhost:8080 '}}};Copy the code

2. Rewrite the instance of the path broker

Module. Exports = {dev: {proxy: {'/API: {target: 'http://localhost:8080', pathRewrite: {' ^ / API ':'}}}}};Copy the code

3. Instances that support HTTPS proxy

module.exports = {
  dev: {
   proxy: {
     '/api': {
       target: 'https://dev-cloud.cc.com',
       secure: false
     }
   }
 }
};
Copy the code

Request an instance of a broker to the same target

The module. Exports = {dev: {proxy: [{context: ['/auth ', '/ API], target:' http://localhost:8080 ',}}};Copy the code

The above is all the content of this chapter. Welcome to pay attention to the wechat public account of Sanzhan “Program Ape by Sanzhan”, and the Sina Weibo account of Sanzhan “Sanzhan 666”, welcome to pay attention!