Author: Yan Yi @ Edamame

One of the most common problems encountered during local development is cross-domain, unrequestable problems. How to solve the cross-domain problems encountered in the development, today sorted out 4 solutions for your reference.

First, what is cross-domain

Cross-domain Because of the browser’s same-origin policy, the browser itself restricts cross-domain requests (strictly speaking, only cross-domain reads). So what is cross-domain? All non-same-origin requests are cross-domain. That is, if the protocol, domain name, or port number of two requests is different, the two requests are cross-domain.

2. Common cross-domain solutions

It is usually used for local self-testing or when both front and back end development and deployment are separated

1. ProxyTable scheme of Webpack

In general projects, there will be the configuration file of the development environment corresponding to Webpack: webpack.dev.js. Add the configuration item of ProxyTable to the configuration item:

proxy: {
          '/api': {
          changeOrigin: true.target: 'http://******.*****.com',}}Copy the code

If the front-end and back-end prefixes do not match or are inconsistent, you can add the pathRewrite attribute to ensure consistency:

proxy: {
            '/EntryApp': {
              changeOrigin: true.target: 'http://******.*******.com'.pathRewrite: {"^/EntryApp": "/EntryApp"}}},Copy the code

Cross-domain problems of proxyTable implementation:

1. The cookie is lost and the interface cannot be accessed

2. Error 403 is reported in the POST request

2. Switchhosts

SwitchHosts is a tool for managing and quickly switching Hosts. The open source software enables you to SwitchHosts configuration with one click. SwitchHosts needs to manage IP address and port mapping on the host, so you need to run it as an administrator.

After opening SwitchHosts, you need to configure the corresponding mapping in Myhost. When the left hand side is in the open state, the file is in the read-only state. If you need to edit the file, you need to close the file.

Problems that may occur during the use of SwitchHosts:

1. The default port number is 80. If the default port number is not 80, configure a corresponding port number

2. Browsers have proxies that consider proxy tools first.

3, Uuaper

Uuaper is a nodeJs-based tool provided by Baidu for solving front-end cross-domain problems. For detailed installation and configuration, you can go to the official website of NPM to find Uuaper, which needs to be combined with NodeJS and has automatic authentication function:

var express = require('express');
var app = express();
 
var uuaper = require('uuaper');
    app.use('/api'.new uuaper({
        target: 'http://xxx.xxx.com/'.debug: true.auth: {
        server: 'http://xxx.baidu.com/login?'.username: 'xxx'.password: 'xxx',}}));Copy the code

4, Nginx

Nginx is a free, open source high-performance HTTP and reverse proxy server.

Nginx is often used when the front and back ends of the line are deployed separately.

Nginx. conf is the master configuration file and consists of several parts, each of which is distinguished by {}. Mainly include:

  • Main: indicates the global configuration of nginx
  • Events: The network connection between the Nginx server and users is affected
  • HTTP: can nest multiple servers, configure proxy, cache, logging, etc
  • Server: Configures the parameters of the virtual host. One HTTP server can have multiple servers

Server proxy_pass:

// The domain name of the front-end service is fe.**.com
// The domain name of the back-end service is dev.**.com
server {
    listen: 80.server_name: fe.**.com,
    location / {
         proxy_pass dev.**.com
    }
}
Copy the code

Other instructions can be added as required, such as:

  • Proxy_connect_timeout: The maximum time that nginx waits between receiving a request and connecting to the upstream server
  • Proxy_cookie_domain: Replaces the domain property of the set_cookie header of the upstream server
  • Proxy_cookie_path: Replaces the path of the upstream server’s set_cookie header
  • Proxy_set_header: Overwrites the content sent to the upstream server header, or it can be issued by setting the value of a header to an empty string without sending a header