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 limitations of Ajax being homologous. 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.

First, let’s take a simple example to illustrate how to solve cross-domain problems encountered in actual development. First let’s look at the error message caused by cross-domain:

Solution steps:

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

‘proxyTable: {[‘/ Java/Mgr-auth ‘]: {// Replace the proxy address name

Target: 'http://www.hack002.com/forum-57-1.html', / / agent address changeOrigin: true, / / can cross domain pathRewrite: {[' ^ / Java/MGR - auth] : // mgr-auth}}Copy the code

} `

After the configuration is complete, restart the service and restart the project as required: NPM run serve or NPM 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, common cross-domain situation common cross-domain situation through THE URL link to distinguish between the main six:

① 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.

To solve a cross-domain problem, you can use the following methods:

(1) Front-end project configuration agent;

② Configure cross-domain access on the server.

③ Use Chrome extensions.

The method of front-end project configuration agent is used to solve cross-domain problems. For details, refer to the case at the beginning of this article.

2. Configure cross-domain access on the server to solve the cross-domain problem. This needs to be configured on the server.

Allow CORS: Access-Control-Allow-Origin Allow CORS: Access-Control-Allow-Origin Allow CORS: Access-Control-Allow-Origin

There are about four common types of agents:

(1) Basic agent;

② 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 '}}};

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://www.hack002.com', secure: false } } } };

Module. exports = {dev: {proxy: [{context: [‘/auth’, ‘/ API ‘], target: ‘http://localhost:8080,’}}};

Above is all there is in this chapter, reproduced note source Hack002 BBS: https://www.hack002.com/thread-8842-1-1.html