File port domain name trostrhost:
The following is my reprinted article. I read the information about the server agent, it is very comprehensive. Of course, this is very convenient for public friends .
Blogger article link: https://www.jianshu.com/p/a2e3147c2af2
When we use vue-cli tool to create vue project
Initialize my website project
There will be an index.js file in the created design structure .
image.png：
The proxyTable node of this index.js file is empty.
image.png：
Two basic skills are required to understand the role of this node
Cross-domain
Use trusted servers for cross-domain.
agent
proxyTable is a relay server service for cross-domain proxies, provided by vue-cli scaffolding developers. Based on (http-proxy-middleware plugin).
Why is there a proxy table?
Sometimes, the naming domain of the feedback interface ( abc / data.json) that we request during processing is not in the same domain name as vue (localhost.8080), and the cross-border service of cors is not provided on the back.
image.png：
Under normal circumstances, we cannot request data from a file via ajax because it is cross-domain. The browser's homology policy interrupts the return of this data and has no location.
There are two solutions.
Server start cors (most convenient, most convenient)
Use a trusted server for transmission ( vue still requires its own background, let the background request background data, and then return the data to vue)
Login does not provide a data interface for cross-platform background services
Use node.js to write a very simple http service here. The port number is 54321.
The service only returns json data.
However, cross-domain functionality is not enabled.
const http = request ('http)
const fs = demand ('fs)
http.createServer ((query, answer) = \\ ugt26;
console.log（poll.url）
// For all requests, this json data will be returned.
fs.readFile ('./ json.data.json ",' utf-8 ', (error, data) = >>
Response (data)
}）
Listening: Listening ( 54321, () => {
console.log ("The server is running on 54321")
}）
have a test.
Then use vue-cli to create a vue project
Then enter the following code in App.vue
Created ()
this.axios.get ('http: // localhost: 54321 / json.data.json ")
.Let（answer = \\ ugt26 gt; {
this.users = answer.date.todoList：
console.log（this.users.todoList）
}）
. Catch (error = \\ \\ {
console.log (error)
}）
，
Not surprisingly, you will definitely get a cross domain ( Vue: 8080). (Json.data:54321)
It is assumed that the background is written by other people, even people or companies you do n’t even know. You cannot add them to the intersection of the corridor.
Then there is only one option.
Adjust agent chart
Set up proxyTable for cross domain
The basic principle of ProxyTable cross domain is as follows:
In the web development mode, the web package will provide us with an http proxy server.
When we request an interface, it is actually an http proxy server provided by the requested web page .
The real data server required by the trusted server.
Eventually, the data passes through a trusted web server and is finally transferred to our vue program.
Why should I add a trusted server?
Because the proxy server is not a browser, there are no restrictions on the same source policy.
Once you understand the basics, you can understand certain functions of the agent node.
Agent {
// The form "/ api" here is equivalent to the target, you visit / api === http: // local host: 54321 link:
‘/ Api”：
Target 'Http: // Local host: 54321 / ", // Real server interface address // http: // Local host: 54321 / json.data.json,
Security: true, // if https, you need to run this option
changeOrigin: Yes, // is this a crossword? Of course, yes, there is no need to adjust this proxy table without cross-domain.
pathRewirte ： {
// This is a sitelink. For example, if the interface contains / api, it needs to be configured in this way.
'/ ^ Fire ”： fire /” ，
// equivalent
// Step 1 / api = http: // Local host: 54321 /
// Step 2 / ^ api = / api + api == http: // Local host: 54321 / API:
}
}
，
Notes about the pathRewrite node Q & A knowledge picture price Daquan .
First, set / api \\ rsquo; in the ProxyTable module, place the server address in the target, which is the address at the beginning of the interface, such as http. // Local host: 54321 /, then when we call the interface, we can use Global / api, then / api has the same effect as http. // Local host: 54321 /, for example, the interface address is http // localhost. 54321 / api / json.data, we can use / api / json. data:
What is the role of pathRewrite? The function here is equivalent to replacement / API. If there is no API in the interface, it will be empty. If there is an API in the interface, it should be written as :: API. api: can be understood as a redirect or reset function.
to sum up:
proxyTable is a trusted server provided by the Web network in the development environment (using http-proxy-middleware)
The goal is to send requests to ajax cross-domain during the development phase when the server is unwilling to enable cross-domain functionality .
When the real publishing environment does not work. Until you configure a trusted server or open it in the background
vue front-end server proxy, proxyTable briefly describes the file domain name trostrhost. JS