How to solve cross-domain issues

As a front-end development, are you still worrying about solving cross-domain?
I won’t elaborate on how to generate cross-domains. For details, see browser's same-origin policy
Here I recommend these two cross-domain methods. There are many other cross-domain methods but they are not recommended. The mainstream is also these two methods.

The solution is as follows:

	Development environment	Production Environment
Option One	cors	cors
Option II	proxy	nginx

Option 1: cors~

cors called Cross Origin Resource Sharing. This solution has no workload for the front-end, and there is no difference in the writing of the normal sending request. The workload is basically in the back-end. For each request, the browser must first OPTIONS (not all requests will send options, cors ), and learn the 0614a8d9f6405d method supported by the server for cross-origin requests through pre- HTTP After confirming that the server allows the cross-origin request, send the real request using the HTTP The recommended reason is: as long as it is configured for the first time, no matter how many interfaces and projects are reused, the cross-domain problem is solved once and for all, and it can be easily used in both the development environment and the formal environment. Detailed MDN document

But there are always back-ends who feel troublesome and don't want to do this, and there are solutions for pure front-ends.

Option 2: proxy+nginx

It is also very convenient to use the 0614a8d9f640bd of proxy in the dev document it will be used. But this method cannot be used in a production environment. In the production environment, you need to use nginx for reverse proxy. Regardless of whether it is proxy and nginx , the principle is the same. By setting up a transit server to forward requests to avoid cross-domain problems.

Development environment

• For local development, if you are a framework or the like, you can proxy
• If you do not use the framework and webpack the like, the simplest is disable the security policy of Google Chrome

 devServer: {
    proxy: {
      '/common-backend': {
        target: `http://url:port/`,
        changeOrigin: true
      }
    }
  },

Production Environment

For production environment, nginx

• nginx

For example, the backend address is http://localhost:8089/mall_war/*.do
Then the front end only needs to access /mall_war/*.do in the code, and the default is ip of the deployment server to access
Then configure it in nginx as follows

server {
    listen       8066;
    server_name  commonFronted;
    # 项目静态资源目录
    location / {
        alias     /xxx/dist;
        index     index.html;
    }

    location ^~/mall_war/ {
        proxy_pass http://localhost:8089/mall_war/;
        proxy_set_header  Host $host;
        proxy_set_header  X-Real-IP $remote_addr;
        proxy_set_header  X-Forwarded-Proto https;
        proxy_set_header  X-NginX-Proxy true;
        proxy_buffers 256 4k;
        proxy_max_temp_file_size 0k;
        proxy_connect_timeout 30;
        proxy_send_timeout 60;
        proxy_read_timeout 60;
        proxy_next_upstream error timeout invalid_header http_502;            
    }
}

The second method is recommended here, it is very convenient for development online, and it can be realized by simply configuring it.