Proxy using proxyTable parameter

This time I will bring you the use of proxyTable parameter proxy. What are the precautions for using proxyTable parameter 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. For security reasons, data is not allowed to be obtained between different domains. , except for a few special examples

, <script>, <audio> and other tags can be cross-domain but usually in the form of get. If you use axios of js to obtain remotely If so, the same-origin policy will be triggered unless your server code sets a header to allow you to access it. This is obviously unreasonable! . Isn’t it popular nowadays to separate front-end and back-end? The back-end code runs 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 </script>

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 Isn't it easy if the request is 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(()=>{})

After the above code is executed, it will automatically help you obtain the data of https://www.xxx.com/api/getMessage across domains

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

Recommended reading:

Encapsulate the Vue2 routing navigation hook and use it in actual combat

node token for user verification

The above is the detailed content of Proxy using proxyTable parameter. For more information, please follow other related articles on the PHP Chinese website!