一、什么是跨域问题

当我们从一个域名的网页去请求另一个域名的资源时，就会面临跨域问题。跨域问题是出于浏览器的同源策略产生的，指的是协议、域名、端口号有一个不同就是跨域。

同源策略是浏览器最核心最基本的安全功能之一，同源策略的作用是保护用户隐私，防止一些恶意的网站窃取用户的信息。

二、跨域请求的解决方法

三、为什么使用axios解决跨域问题

axios是一个基于Promise的HTTP客户端，它可以在浏览器和Node.js中发送axios请求。与JQuery等库相比，axios更轻量级、更易扩展、更灵活，生态也更加活跃。近年来在前端领域广受欢迎。同时，axios也内置了可以处理跨域问题的配置项，使用方便，可以避免手动处理的繁琐和重复劳动，提高开发效率。

四、使用axios解决跨域问题的代码示例

1、打包代码

axios({
  method: 'get',
  url: 'http://example.com/user',
  params: {
    name: 'jerry',
    age: 18
  }
}).then(res => {
  console.log(res.data);
}).catch(err => {
  console.log(err);
});

devServer: {
  proxy: {
    '/api': {
      target: 'http://example.com',
      changeOrigin: true,
      pathRewrite: {
        '^/api': '/api'
      }
    }
  }
}

function jsonp(url, params, callback) {
  let script = document.createElement('script');
  let queryString = params ? Object.entries(params)
    .map(param => param.join('='))
    .join('&') : '';

  script.src = ${url}?callback=${callback}&${queryString};
  document.body.appendChild(script);
  return script;
}

jsonp('http://example.com/user', {name: 'jerry', age: 18}, (data) => {
  console.log(data);
});

axios.post('/api/getUserInfo', {
  name: 'jerry',
  age: 18
}, {
  headers: {
    Origin: 'http://localhost:8080'
  }
}).then(res => {
  console.log(res.data);
}).catch(err => {
  console.log(err);
});

axios.post('/api/getUserInfo', {
  name: 'jerry',
  age: 18
}, {
  headers: {
    Origin: 'http://localhost:8080',
    withCredentials: true
  }
}).then(res => {
  console.log(res.data);
}).catch(err => {
  console.log(err);
});

axios({
  method: 'post',
  url: '/api/getUserInfo',
  data: {
    name: 'jerry',
    age: 18
  },
  headers: {
    Origin: 'http://localhost:8080',
    'Content-Type': 'application/json;charset=UTF-8'
  }
}).then(res => {
  console.log(res.data);
}).catch(err => {
  console.log(err);
});