How to use webpack to handle cross-domain requests

This time I will show you how to use webpack to handle cross-domain requests, and what are the precautions for using webpack to handle cross-domain requests. The following is a practical case, let's take a look.

During front-end debugging, cross-domain has always been a troublesome problem. This has actually been discussed in the previous article about a solution to cross-domain problems. Some methods that can be used have been discussed.

If you want to use JSONP, firstly, there are many things that need to be modified, and it is not in line with the general trend of front-end development. If you use CORS, there is no application/json type. And more importantly, this is only a requirement during front-end debugging, not after it goes online, so it is not good to have too many intrusions into the back-end.

So a thought suddenly flashed through my mind - wouldn’t adding an agent solve this problem? But after thinking about it, it was quite troublesome to write, so I put it on hold.

Until a few days ago, Stone mentioned that webpack-dev-server had already thought of it and had already helped us implement it.

So, I tested it in a Vue project and found that it was really great. It can not only hot load the local server, but also directly call the remote API across domains, which perfectly solved all the problems I encountered before.

Next I will briefly introduce the steps (taking a webpack project built with Vue scaffolding as an example):

First check whether there is

proxy: config.dev.proxyTable,

in build/webpack.dev.conf.js

If this configuration item is commented out, please open the comment. If not, please add it to the devServer object

Then add the proxyTable configuration item to the dev object in config/index.js:

proxyTable: {
   '/**': {
    target: 'http://api.xxx.com',
    changeOrigin: true,
    secure: false
   }
  },

The key /** in front means to proxy all requests. If you proxy some requests, you can change it to a string such as /api.

The target behind is the website to be proxied. changeOrigin means to change the Origin field in the http request. When the browser receives the back-end reply, the browser will think that this is a local request. On the back end, it will be considered a call within the site.

In this way, through this simple configuration, the cross-domain problem is perfectly solved.

After that, when running

npm run dev

directly, you can proxy the ajax request in the test front-end to the back-end server for testing!

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Using Js to implement Promise library

How to crop images in react

The above is the detailed content of How to use webpack to handle cross-domain requests. For more information, please follow other related articles on the PHP Chinese website!