1. Modifying back-end code, which is fine if the back-end project is running on your own machine, can be cumbersome if it is running on another server, or even if it is being maintained by another team, and ensuring that the code is not released into production.
  2. Each time you start the browser, enter a long code to disable the security policy. For example, the Command for Chrome is as follows:open -a /Applications/Google\ Chrome.app --args --disable-web-security --user-data-dirNot only is it troublesome, but if you accidentally access some sensitive data in this mode, it also poses a security risk.
  3. The front-end tuner interface in development mode carries the URL of the test back-end server, so it should be removed before release to production.

In short, it is more trouble, can not experience that kind of took off his pants on, finished with the pants on the refreshing feeling, I said is to go to the toilet. So today we’re going to introduce a much simpler and safer solution, and we’re going to dig into how it works.

First, create a front end project with create-react-app. Suppose your front end project runs at http://localhost:3000 and the back end project that provides the API runs at http://localhost:4000. All you need to do is add this configuration line to the package.json file of the front-end project:

"proxy": "http://localhost:4000"
Copy the code

And then you magically find that an HTTP request from the front end of the page, even though it’s still going to port 3000, is automatically forwarded to the back end server at port 4000 and gets the correct response, while the request to the page is not forwarded, it’s still caught by the front end route. So we don’t have to worry about how to deal with cross-domain problems at all. The problem is solved, but two more questions linger in my mind:

  1. Package. The jsonproxyWhere do parameters operate?
  2. How is it possible to separate requests to a page from requests to a REST API?

The react-script start script is used to start the creation-react-app project. The react-script start script is used to start the creation-react-app project. Create-react-app /packages/react-scripts/scripts/start.js create-react-app/packages/react-scripts/scripts We can see the following code:

// Load proxy config
const proxySetting = require(paths.appPackageJson).proxy;
const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
// Serve webpack assets generated by the compiler over a web sever.
const serverConfig = createDevServerConfig(
    proxyConfig,
    urls.lanUrlForConfig
);
const devServer = new WebpackDevServer(compiler, serverConfig);
Copy the code

The paths.appPackageJson declaration here is in create-react-app/packages/react-scripts/config/paths.js:

module.exports = {
  appPackageJson: resolveApp('package.json'),};Copy the code

So we know that proxySetting is the proxy value we defined in the package.json of the front-end project. Then we see that proxySetting is used to generate serverConfig. Finally serverConfig creates the WebpackDevServer instance as a configuration parameter. Webpack-dev-server is a test server for launching WebPack and provides development-friendly features such as HMR, so we come to the first conclusion: The proxy value defined in package.json of the front-end engineering acts on the WebpackDevServer and is finally forwarded by the WebpackDevServer.

Let’s continue trying to answer the second question — how is it possible to separate requests to a page from requests to a REST API? We see that proxySetting is first passed into the prepareProxy method to get proxyConfig, and then an object is returned in the createDevServerConfig method, And the value of the proxy field of the object is proxyConfig. Finally, the object is the configuration item of webpack-dev-server. It can be seen in the webpack-dev-server document that the function of proxy is to make a layer of proxy. Forwarding requests from the page to another address, so it’s all about how proxyConfig is configured, so look at the prepareProxy method, PrepareProxy methods defined in the create – react – app/packages/react – dev – utils/WebpackDevServerUtils js, If proxy is a well-formed string, it returns an array with only one object element. The context field in this object displays the following:

context: function(pathname, req) {
    return( req.method ! = ='GET' ||
        (mayProxy(pathname) &&
         req.headers.accept &&
         req.headers.accept.indexOf('text/html') = = =- 1)); }Copy the code

Here we see that req.headers. Accept is used to determine what type of content the browser wants to get from this HTTP request. Therefore, if text/ HTML is included in accept, it indicates that the request is a document and therefore should not be forwarded to the back end. This pile of judgment logic is shown in a diagram as follows:

http-proxy-middleware
Therefore, the proxy will only forward HTTP requests made by Ajax or FETCH.

In addition to the simplest configuration mentioned in this article, webpack-dev-server proxy supports multiple configurations to satisfy multiple proxy rules at the same time. Interested students can refer to the documentation for more details.