As a front-end developer, are you still struggling with cross-domain issues?


How is the cross domain generated will not be described in detail, see
The browser’s same-origin policy


Here I recommend these two ways to cross domain. There are many other ways to cross domain, but none of them are recommended. These two ways are the main ones.

The solution is as follows:

Solution 1: CORS ~

CORS is called Cross Origin Resource Sharing (Cross Domain Resource Sharing). This solution has no effort on the front end, and there is no difference from the normal sending request writing. The effort is basically here on the back end. Each request, the browser must first send a pre-request as an OPTIONS request (not all requests will send OPTIONS, CORS), and pre-check the request to see what HTTP methods the server supports for cross-source requests. After verifying that the server allows the cross-source request, the actual request is sent using the actual HTTP request method. The reason for the recommendation is: as long as the first match is good, no matter how many interfaces and project reuse can be, once and for all to solve the cross-domain problem, and whether it is a development environment or a formal environment can be convenient to use. Detailed MDN documentation

But there’s always a backend that doesn’t want to do that, and there’s a pure front-end solution.

Scheme 2: Proxy + Nginx

It is also very convenient to use Webpack Proxy in DEV development mode, and you can use it with reference to the documentation. But this approach is not available in a production environment. In a production environment, you need to use NGINX for reverse proxying. The principle of both Proxy and Nginx is the same. It avoids cross-domain problems by setting up a relay server to forward requests.

The development environment

• For native development, if you’re a framework or something, just use itproxyYou can do the proxy
• If no frame is used as wellwebpackOr something like that. The simplest one isDisable Google browser security policy

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

The production environment

Nginx is preferred for production environments

• nginx

Such as backend address to http://localhost:8089/mall_war/ *. Do so front-end in the code only needs to access/mall_war / *. Do you can, the default is the deployment server IP to access Then in nginx configuration is 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; }}

Here recommend the second way, the development line is very convenient, simple configuration can be achieved.