Use Axios in Vue to implement cross-domain requests and set the format of the returned data in JSON format, not JSONP format

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

1. 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

2. Before (APP) {
4. Because the request referer and host are different, so the front end can not get the data, need to do a proxy
6. 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.
8. The AJAX request is implemented here using Axios: Axios is a promise-based HTTP library that can be used in browsers and node. js
10. Create an XMLHttpRequest object in the browser, create an HTTP request from node. js
12. App.get ('/api/getdisclist ', (req, res) => {//The path here is the URL to send the request to the front end
14. Let url = ' HTTPS://C.Y.QQ.COM/SPLCLOUD/FCGI-BIN/FCG_GET_DISS_BY_TAG.FCG
16. Axios send a GET request, you can configure Config yourself
18. Axios.get (URL, {
20. Headers: {
22. ' Referer ': ' https://c.y.qq.com/',
24. ' Host ': ' C.y.qq.com ',
26. },
28. The params is the URL parameter that is about to be sent with the request, unformatted object/urlsearchparams object
30. Params:req.quest
32. }). Then ((response) => {
34. Res.json (Response.data)//Return Data
36. }). catch ((Error) => {
38. Console.log (Error)
40. })
42. })
44. }

4. Write JS code on the front

1) Define a recommend.js file that reads as follows

2. Import Axios from ' Axios '
4. Get data for a song list
6. Because the proxy request is used here, the front-end request is changed to an AJAX request
8. Export function Getdislist () {
10. Const URL = '/api/getdisclist '
12. Const data = {
14. Picmid:1,
16. Rnd:Math.random (),
18. g_tk:5381,
20. Jsonpcallback: ' Getplaylist ',
22. Loginuin: ' 0 ',
24. hostuin:0,
26. Format: ' JSON ',
28. Incharset: ' UTF8 ',
30. Outcharse: ' Utf-8 ',
32. notice:0,
34. Platform: ' Yqq ',
36. neednewcode:0,
38. categoryid:10000000,
40. Sortid:5,
42. sin:0,
44. Ein:29
46. }
48. Using AJAX requests, here with Axios
50. Return Axios.get (URL, {
52. Params:data
54. }). Then (res) => {
56. Successfully returns a Promise object
58. Return Promise.resolve (Res.data)
60. }). catch ((Error) => {
62. Console.log (Error)
64. })
66. }

2) write the following in the <script> of the Recommend.vue file:

2. <script>
4. Import {getdislist} from '. /.. /api/recommend '
6. Export Default {
8. Get Data
10. Created () {
12. This._getdisclist ()
14. },
16. Methods: {
18. Get data for a single list of songs
20. _getdisclist () {
22. Getdislist (). then (res) => {
24. Console.log (RES)
26. })
28. }
30. }
32. }
34. </Script>

5, the content of the browser console.log () output

1. ' 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

2. <script>
4. Import {getdislist} from '. /.. /api/recommend '
6. Export Default {
8. Get Data
10. Created () {
12. This._getdisclist ()
14. },
16. Methods: {
18. Get data for a single list of songs
20. _getdisclist () {
22. Getdislist (). then (res) => {
24. Console.log (RES)
26. Let num1 = res.indexof (' (')
28. Let num2 = res.indexof (') ')
30. Let resultdata = json.parse (res.substring (NUM1 + 1, num2))
32. Console.log (typeof (Resultdata))
34. Console.log (Resultdata)
36. })
38. }
40. }
42. }
44. </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