Using Axios in Vue to implement cross-domain requests
Demand analysis: In the project needs to crawl QQ music song list of data, due to request the data address URL=HTTPS://C.Y.QQ.COM/SPLCLOUD/FCGI-BIN/FCG_GET_DISS_BY_TAG.FCG. From the official website of QQ music you can see that the domain name in Referer in the request header is y.qq.com (the domain name of the sending request page), and the host domain name is c.y.qq.com (the domain name of the requested page), because the two are not the same, so the front-end can not directly send a request to the QQ server to get data. This time requires the server to do a proxy: that is, the front-end to its domain server to send a request, and then the domain server to the QQ music domain server to send the request, the domain server to get the data, and then back to the front end.
Use Axios in Vue to implement cross-domain requests. Axios is a promise-based HTTP library that can be used in browsers and node. js.
Chinese Handbook
GitHub Address
Here's how to implement a proxy using Axios
1. First use NPM to install Axios to a local project
- NPM Install Axios--save
2, then, the introduction of Axois in Build/webpack.dev.conf.js
3. Add Property function before (app) {} in Devserver object in Build/webpack.dev.conf.js file
The complete code is as follows
- Before (APP) {
- Because the request referer and host are different, so the front end can not get the data, need to do a proxy
- The backend sends requests to the server that has the data, gets the data, and then the front-end requests that data from its own servers.
- The AJAX request is implemented here using Axios: Axios is a promise-based HTTP library that can be used in browsers and node. js
- Create an XMLHttpRequest object in the browser, create an HTTP request from node. js
- App.get ('/api/getdisclist ', (req, res) => {//The path here is the URL to send the request to the front end
- Let url = ' HTTPS://C.Y.QQ.COM/SPLCLOUD/FCGI-BIN/FCG_GET_DISS_BY_TAG.FCG
- Axios send a GET request, you can configure Config yourself
- Axios.get (URL, {
- Headers: {
- ' Referer ': ' https://c.y.qq.com/',
- ' Host ': ' C.y.qq.com ',
- },
- The params is the URL parameter that is about to be sent with the request, unformatted object/urlsearchparams object
- Params:req.quest
- }). Then ((response) => {
- Res.json (Response.data)//Return Data
- }). catch ((Error) => {
- Console.log (Error)
- })
- })
- }
4. Write JS code on the front
1) Define a recommend.js file that reads as follows
- Import Axios from ' Axios '
- Get data for a song list
- Because the proxy request is used here, the front-end request is changed to an AJAX request
- Export function Getdislist () {
- Const URL = '/api/getdisclist '
- Const data = {
- Picmid:1,
- Rnd:Math.random (),
- g_tk:5381,
- Jsonpcallback: ' Getplaylist ',
- Loginuin: ' 0 ',
- hostuin:0,
- Format: ' JSON ',
- Incharset: ' UTF8 ',
- Outcharse: ' Utf-8 ',
- notice:0,
- Platform: ' Yqq ',
- neednewcode:0,
- categoryid:10000000,
- Sortid:5,
- sin:0,
- Ein:29
- }
- Using AJAX requests, here with Axios
- Return Axios.get (URL, {
- Params:data
- }). Then (res) => {
- Successfully returns a Promise object
- Return Promise.resolve (Res.data)
- }). catch ((Error) => {
- Console.log (Error)
- })
- }
2) write the following in the <script> of the Recommend.vue file:
- <script>
- Import {getdislist} from '. /.. /api/recommend '
- Export Default {
- Get Data
- Created () {
- This._getdisclist ()
- },
- Methods: {
- Get data for a single list of songs
- _getdisclist () {
- Getdislist (). then (res) => {
- Console.log (RES)
- })
- }
- }
- }
- </Script>
5, the content of the browser console.log () output
- ' Musicjsoncallback ({"Code": 0, "subcode": 0, "message": "", "Default": 0, "data": {"UIn": 0, "CategoryId": 0, "sortId": 5, " Sum ": 0," sin ": 0," ein ": 0," list ": []}) '
That is, the output is the JSONP format, which is the string
6. Set the returned data to the JSON format: Since the returned data is a string, it can be intercepted, using Json.parse () to convert the string into JSON form
- <script>
- Import {getdislist} from '. /.. /api/recommend '
- Export Default {
- Get Data
- Created () {
- This._getdisclist ()
- },
- Methods: {
- Get data for a single list of songs
- _getdisclist () {
- Getdislist (). then (res) => {
- Console.log (RES)
- Let num1 = res.indexof (' (')
- Let num2 = res.indexof (') ')
- Let resultdata = json.parse (res.substring (NUM1 + 1, num2))
- Console.log (typeof (Resultdata))
- Console.log (Resultdata)
- })
- }
- }
- }
- </Script>
The output is as follows
The above is probably the use of Axios to achieve the service side of the proxy request
Use Axios in Vue to implement cross-domain requests and set the format of the returned data in JSON format, not JSONP format