How to set proxyTable parameters across domains with vue

This time I will show you how to use vue to set proxyTable parameters across domains, and use vue to set proxyTable parameters across domains. What are the precautions? The following is a practical case, let’s take a look take a look.

What is proxy cross-domain

There is a same-origin policy between browsers, and different domains are considered for security It is not allowed to obtain data, except for a few special examples

, , and other tags can be cross-domain but usually in the form of get. If you use If axios of js is obtained 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 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

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(()=>{}) 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!