Detailed explanation of Vue using axios cross-domain request data instance

axios does not have a jsonp cross-domain request method by default. Generally speaking, the popular approach is to solve cross-domain problems in the background, that is, backend developers add cross-domain header information. This article mainly introduces in detail the problem of Vue using axios to request data across domains. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

For example,

header,response.setHeader("Access-Control-Allow-Origin", www.allow-domain.com)

in java, but many times, the backend does not want to modify it for some reasons or has already written the jsonp interface and needs to adapt to different platforms. At this time, the front end can introduce dependencies separately to resolve That’s the question.

Introduce dependencies

cnpm install jsonp

Import into vue file

import jsonp from 'jsonp'

Usage method (you can refer to the documentation of jsonp on npm)

jsonp("http://cross-domain.com",//替换网址
  {
    //jsonp的回调函数名
    name: 'success_jsonpCallback'
  },

  //注意第一个参数是 err，第二个参数是 data
  function (err, data) { 
    console.log(data);
  });

Related recommendations:

About vue2.0 setting proxyTable to use axios for cross-domain requests

Vue2.0 axios front-end and back-end login interceptor

The most complete axios guide

The above is the detailed content of Detailed explanation of Vue using axios cross-domain request data instance. For more information, please follow other related articles on the PHP Chinese website!