关于ajax axios的跨域问题，如何解决？

利用axios发送get请求时出现跨域问题

<div class="wrapper">
        <button id="trigger1">GET</button>
        <button id="trigger2">POST</button>
        <button id="trigger3">通用型</button>
    </div>
    
    <script>
        let bt1 = document.querySelector('#trigger1');
        let bt2 = document.querySelector('#trigger2');
        let bt3 = document.querySelector('#trigger3');

        axios.defaults.baseURL = 'http://localhost:3000';
        
        bt1.addEventListener('click',()=>{
            axios.get('/axios',{
                params:{
                    id:100
                },

                headers:{
                    name:'Peter',
                    age:'23'
                }
            }).then(value =>{
                console.log(value)
            })
        })
    </script>

const express = require('express')
const cors = require('cors')
const app = express()
app.use(cors({
    origin: "http://localhost:3000",
}))

app.get('/axios',(req,res)=>{
    res.setHeader('Access-Control-Allow-Origin','*')
    res.setHeader('Access-Control-Allow-Headers','*')
    res.send('Get Command Works!')
})

app.listen(3000,()=>{
    console.log('Listening...')
})

错误信息为：Access to XMLHttpRequest at 'http://localhost:3000/axios?id=100' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:3000' that is not equal to the supplied origin.

app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*')
res.header('Access-Control-Allow-Headers', 'Authorization,X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method' )
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PATCH, PUT, DELETE')
res.header('Allow', 'GET, POST, PATCH, OPTIONS, PUT, DELETE')
next();
});

axios.defaults.baseURL = 'http://localhost:3000';
axios.defaults.withCredentials = true; // 允许发送跨域请求时携带 Cookie

bt1.addEventListener('click', () => {
  axios
    .get('/axios', {
      params: {
        id: 100
      },
      headers: {
        name: 'Peter',
        age: '23'
      }
    })
    .then(value => {
      console.log(value);
    });
});

const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.setHeader('Access-Control-Allow-Headers', '*');
  next();
});

app.get('/axios', (req, res) => {
  res.send('Get Command Works!');
});

app.listen(3000, () => {
  console.log('Listening...');
});

• 这篇博客: 前端网络基础 - axios使用中的 XMLHttpRequest的缺点 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 前面我们介绍了使用XMLHttpRequest实例来发送AJAX请求，它的具体实现步骤如下：

  // 创建xhr实例
  const xhr = new XMLHttpRequest() 
  
  // 设置请求方式，请求URL
  xhr.open('post', 'http://localhost:3000/test')
  
  // 设置请求头
  xhr.setRequestHeader('Content-Type', 'application/json')
  
  // 设置返回对象xhr.response的数据格式
  xhr.responseType = 'json'
  
  // 设置请求体，并发送请求
  xhr.send(JSON.stringify({
      name: 'qfc',
      age: 18
  }))
  
  // 接收异步的响应
  xhr.onreadystatechange = function(){
      // 当readyState为4时，表示收到完整的响应体
      if(xhr.readyState === 4) {
          // 如果响应状态码在200~299之间，说明服务器响应成功
          if(xhr.status >= 200 && xhr.status < 300) {
              // 响应状态码，状态描述
              console.log(xhr.status)
              console.log(xhr.statusText)
              // 响应头
              console.log(xhr.getAllResponseHeaders())
              // 响应体
              console.log(xhr.response)
          }
      }
  }

  通过以上代码，我们可以总结出XMLHttpRequest实现AJAX请求的几个缺点：

  1、步骤过多，过于繁琐

  2、AJAX请求响应都与xhr实例关联，严重耦合

  3、事件回调的方式获得异步响应，容易产生异步回调地狱

  由于XMLHttpRequest具有的以上缺点，所以我们很少直接使用XMLHttpRequest来实现AJAX，通常情况下，我们都使用基于XMLHttpRequest实现AJAX的封装库。目前较为流行的是axios库。