Detailed explanation of cross-domain use of proxyTable proxy

This time I will bring you a detailed explanation of the cross-domain use of the proxyTable proxy. What are the precautions for the cross-domain use of the proxyTable proxy. The following is a practical case, let's take a look.

What is proxy cross-domain

There is a same-origin policy between browsers, and different domains are considered for security Data is not allowed to be obtained between them, except for a few special examples

, , and other tags can be cross-domain but usually in the form of get. If you use If the axios of js is accessed remotely, the same origin policy will be triggered, unless your server code is set to head er to allow you to access it, which is obviously very unreasonable! . Isn’t it popular nowadays to separate the front-end and back-end? The back-end code has run away and only the front-end is left. How can I obtain the two-dimensional code in the front-end? I feel that using cross-domain is very troublesome and difficult, and it may not be possible to do this. Then you can use proxy cross-domain

Principle of proxy cross-domain

The so-called proxy is to use the back-end to make http requests instead of the front-end , just like in vue scaffolding, to run the project you have to enter npm run dev or npm run start. This command actually opens the configured node server. The agent of vue scaffolding uses node to initiate http requests instead of the front desk. Since Wouldn't it be easy if the request was not initiated by the browser?

How does vue scaffolding proxy cross-domain, find the index.js file in the config folder, there is a dev in the file, find proxyTable{} in it, and modify it

proxyTable: { '/api': { target: 'https://www.xxx.com/',//你要跨的域 changeOrigin: true, pathRewrite: { '^/api': '/api', }, headers:{ //这边可以堆headers进行设置 } }, }, Among them target is the address you want to cross domain, /api is the next-level path under the domain you are crossing, like the above is to get the things under https://www.xxx.com/api, and then we introduce an ajax Package axios and perform ajax

import axios from 'axios' axios.get('/getMessage').then(()=>{}) 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!