First, what is cross-domain?

Meaning: The browser cannot execute scripts from other sites. It is caused by the same origin policy of the browser, a security restriction that the browser imposes on javascript.

Question: What is the same-origin policy?

A: The protocol, domain name, and port must be the same. If one of them is different, it will cause cross-domain.

Second, to solve the cross-domain approach

1. CORS (Cross-domain resource Sharing)

First the solution, then the principle.

Solutions:

We need in the main. Add axios js. Defaults. The withCredentials = true

WithCredentials: By default, cross-source requests do not provide credentials (cookies, HTTP authentication, and client SSL certificates). By setting the withCredentials property to true, you can specify that a request should send credentials.

When withCredentials = true is configured, the response header access-Control-allow-origin must be added at the back end, and the domain name must be specified instead of *!!!

This approach addresses cross-cutting issues to support both development and production environments. But there are security issues.

What are the security concerns if the server does not check the source of the request? Typical is a CSRF(Cross SiteRequest Forgery) attack. As the name implies, the attacker will fake the client request to attack the server. (see: blogs.msdn.microsoft.com/ieinternals…

2. Proxy

Vue CLI 2.x

Procedure: Vue-CLI scaffolding project exists *.config.js file

Add the following code to the Dev ProxyTable configuration:

ProxyTable: {'/dailiming': {// Define the proxy name target: 'XXX', // target interface address Secure: true, // If HTTPS is used, you need to enable this option changeOrigin: True,// Whether crossing pathRewrite: {'^/dailiming': "}}}Copy the code

‘/dailiming’: {} tells Node to use proxies only for interfaces that start with ‘/dailiming’. So your interface will write/dailiming/xx/xx. So the final path agent is http://xxx.xx.com/dailiming/xx/xx.

There is no /dailiming in the correct path. So you want to pathRewrite, “^/dailiming” : “, and get rid of “/dailiming”, both to get the correct identification and to get rid of dailiming when you ask for an interface.

Vue CLI 3.x

devServer: { host: 'localhost', //target host port: 8080, proxy: { '/api': { target: 'http://172.16.30.234:8050', / / agent address, the address will replace axios set here set the baseURL changeOrigin: true, / / if the interface cross domain, the need for this parameter configuration pathRewrite: { '^/api': '' } } } },Copy the code

Proxy Mechanism:

In development mode, WebPack provides us with an HTTP proxy server. When we request the interface, it is actually the HTTP proxy server provided by the requesting Webpack. The real data server is requested by this proxy server. Finally, the data goes through the WebPack proxy server and is finally passed to our VUE program.

The proxy server is not a browser and does not have the same origin policy restrictions

Note that this method can only be used in a development environment.