Foreword: Cross-domain request is a requirement often encountered in local development. It is also very simple, just a few lines of code configuration. When I first configured the cross-domain request, the official instructions were too succinct, and the tutorials I found were outdated. After a little debugging, it did not solve the problem. It took a lot of time and energy to solve the problem in the end. So take another project and go through it from scratch, dare not say it is a tutorial, just for the record.
Note: The project in this article is based on Vue CLI ^ 4.3.0, Node.js v12.13.0. And express ~ 4.16.1, if it is not installed, it needs to be installed first, and will not be described later.
1. Run cmd on the desktop , use the command vue create demo to create a vue project demo, plug-in dependencies, etc. use the default configuration:
2. After the project is created successfully, use the command cd demo to enter the demo folder, and then use the command npm run serve to start the project. The default port is 8080:
3. Visit http: // localhost: 8080 / in the browser , you can see the Vue project running locally:
4. Run cmd in the demo folder and use the command express --view = ejs server to create the node.js project server:
5. After the creation is complete, follow the prompts, use the command cd server to enter the server folder, use the command npm install to install the required dependencies, use npm start to start the project, the default port is 3000:
6. Visit http: // localhost: 3000 / in the browser , you can see the Node.js server project running locally:
7. Open the Vue project demo with an editor, open the index.js file in the routes folder under the server folder, add a route, and return the result as a json object:
8. Restart the Node.js project server in the terminal, and then visit http: // localhost: 3000 / person in the browser , you can see the return result after the request is successful
9. Use the command npm install axios to install axios for asynchronous requests for the Vue project, and then import and bind it to the Vue prototype in main.js:
10. Add the life cycle mounted hook function in the App.vue file of the Vue project, use axios to initiate the get request, and the request interface is api / person . At this time, if you restart the Vue project, you can see the request result 404 (Not Found) in the console
11. Create a new vue.config.js in the root directory of the Vue project, as follows:
1 module.exports = { 2 devServer: { 3 proxy: { 4 '/ api' : { 5 target: 'http: // localhost: 3000', // address where the node.js server is running 6 ws: true , 7 changeOrigin : true , 8 pathRewrite: { 9 '^ / api': 'http: // localhost: 3000' // path rewrite 10 } 11 }, 12 } 13 } 14 }
12. Restart the Vue project, open the console, you can see the requested data:
