跨域请求通常是由于浏览器的同源策略引起的，它阻止了一个源的脚本从另一个源获取或操作数据。为了解决这个问题，通常有以下几种方法：

1. JSONP：只支持GET请求，不支持POST等其他HTTP方法。
2. CORS：服务器需要在响应头中设置Access-Control-Allow-Origin。
3. 代理服务器：在服务器端设置代理，代理请求到目标服务器。

以下是使用axios和jQuery发送AJAX请求的示例代码：

使用axios发送AJAX请求

// 安装axios：npm install axios
import axios from 'axios';
 
// 发送GET请求
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });
 
// 发送POST请求
axios.post('https://api.example.com/data', {
  key1: 'value1',
  key2: 'value2'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

使用jQuery发送AJAX请求

// 确保已经在HTML中包含了jQuery库
 
// 发送GET请求
$.ajax({
  url: 'https://api.example.com/data',
  type: 'GET',
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.error(error);
  }
});
 
// 发送POST请求
$.ajax({
  url: 'https://api.example.com/data',
  type: 'POST',
  data: {
    key1: 'value1',
    key2: 'value2'
  },
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.error(error);
  }
});

注意：如果目标服务器支持CORS，axios和jQuery都可以通过配置请求来发送跨域请求。如果不支持，则需要使用JSONP或者设置代理服务器。

在前端中，可以通过以下三种方式使用Ajax、Axios来终止请求：

1. 使用Ajax中的abort方法

var xhr = $.ajax({
  url: "some_url",
  type: "GET",
  dataType: "json"
});
 
// 在需要的时候，调用abort方法终止请求
xhr.abort();

2. 使用Axios中的cancelToken

const CancelToken = axios.CancelToken;
const source = CancelToken.source();
 
axios.get('some_url', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});
 
// 在需要的时候，调用cancel方法终止请求
source.cancel('Operation canceled by the user.');

3. 使用fetch API中的AbortController

const controller = new AbortController();
const signal = controller.signal;
 
fetch('some_url', {
  signal: signal
}).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(error) {
  console.log('Request failed:', error);
});
 
// 在需要的时候，调用abort方法终止请求
controller.abort();

以上三种方法都可以用来终止前端发出的请求。具体使用哪一种取决于你的项目中所用的库和个人喜好。

使用axios发送GET和POST请求的方法如下：

发送GET请求：

// 引入axios库
const axios = require('axios');
 
// 发送GET请求
axios.get('http://example.com/api/data')
  .then(response => {
    console.log(response.data); // 处理响应数据
  })
  .catch(error => {
    console.error(error); // 处理错误情况
  });

发送带有请求体参数的POST请求：

// 引入axios库
const axios = require('axios');
 
// 请求体数据
const data = {
  key1: 'value1',
  key2: 'value2'
};
 
// 发送POST请求
axios.post('http://example.com/api/data', data)
  .then(response => {
    console.log(response.data); // 处理响应数据
  })
  .catch(error => {
    console.error(error); // 处理错误情况
  });

以上代码示例中，我们首先引入了axios库，然后使用axios.get()或axios.post()方法来发送请求。对于GET请求，只需要提供URL即可；对于POST请求，需要提供URL和请求体数据。在.then()中处理响应数据，在.catch()中处理错误情况。

在Ajax和Axios这两种常见的JavaScript HTTP请求库中，我们可以通过统一的方式来设置请求头参数。以下是两种库的示例代码：

Ajax:

$.ajaxSetup({
    headers: {
        'Authorization': 'Bearer YOUR_TOKEN',
        'Content-Type': 'application/json'
    }
});

Axios:

axios.defaults.headers.common['Authorization'] = 'Bearer YOUR_TOKEN';
axios.defaults.headers.post['Content-Type'] = 'application/json';

在这两个示例中，我们都是设置了Authorization和Content-Type这两个常见的请求头参数。YOUR_TOKEN是你的认证token，你需要替换为你的实际token。

这样设置后，所有通过Ajax或Axios发出的请求都会自动携带这些头信息。如果你只想为某个特定的请求设置头信息，你可以在发送请求时指定这些头信息。

以下是使用Vue3、TypeScript、Vant 4、Pinia、Axios和SCSS创建项目的基本步骤：

1. 初始化项目：

npm init vue@latest

2. 选择需要的选项，例如：

Vue 3
TypeScript
Vant 4

3. 安装依赖：

npm install

4. 在main.ts中引入Vant组件库和样式：

import { createApp } from 'vue'
import App from './App.vue'
import Vant from 'vant'
import 'vant/lib/index.css'
 
const app = createApp(App)
app.use(Vant)
app.mount('#app')

5. 配置Axios和Pinia：

// axios.ts
import axios from 'axios'
 
export default axios.create({
  baseURL: 'http://your-api-url',
  // 其他配置...
})
 
// pinia.ts
import { createPinia } from 'pinia'
 
export const pinia = createPinia()
 
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import axios from './axios'
import pinia from './pinia'
 
const app = createApp(App)
app.config.globalProperties.$axios = axios
app.use(pinia)
app.mount('#app')

6. 使用SCSS：

// 在组件中使用
<style lang="scss">
.example {
  color: red;
}
</style>

这些步骤提供了一个基本框架，您可以根据项目需求进行扩展和定制。

以下是一个基于axios的简单类式封装示例，包括了请求拦截器和响应拦截器的基本实现。

import axios from 'axios';
 
class HttpRequest {
  constructor(baseUrl = '') {
    this.baseUrl = baseUrl;
    this.queue = {};
  }
 
  getInsideConfig() {
    const config = {
      baseURL: this.baseUrl,
      headers: {},
    };
    return config;
  }
 
  destroy(url) {
    delete this.queue[url];
  }
 
  interceptors(instance, url) {
    // 请求拦截器
    instance.interceptors.request.use(
      config => {
        // 可以在这里添加请求头等信息
        // 例如：config.headers['Authorization'] = 'Bearer your-token';
        this.queue[url] = true;
        return config;
      },
      error => {
        return Promise.reject(error);
      }
    );
 
    // 响应拦截器
    instance.interceptors.response.use(
      response => {
        this.destroy(url);
        const { data, status } = response;
        return { data, status };
      },
      error => {
        this.destroy(url);
        let { message } = error;
        if (message == "Network Error") {
          message = "后端接口连接异常";
        }
        // 这里可以对错误情况进行自定义处理
        // 例如：对于401错误，可以重新登录等
        return Promise.reject(error);
      }
    );
  }
 
  request(options) {
    const instance = axios.create();
    options = { ...this.getInsideConfig(), ...options };
    this.interceptors(instance, options.url);
    return instance(options);
  }
}
 
export default HttpRequest;

使用方法：

import HttpRequest from './HttpRequest';
 
const http = new HttpRequest('https://api.yourdomain.com');
 
http.request({
  url: '/endpoint',
  method: 'get',
  params: {
    key: 'value'
  }
}).then(response => {
  console.log(response);
}).catch(error => {
  console.error(error);
});

这个封装允许你创建一个全局的HTTP请求实例，并且可以方便地在请求或响应阶段添加拦截器来处理通用的逻辑，比如认证、错误处理等。在实例化HttpRequest时，可以传入一个基础URL，所有的请求都会基于这个URL。每个请求还可以配置自己的拦截器，以满足特定的需求。

AJAX、Fetch 和 Axios 都是用于浏览器中发起HTTP请求的工具，但它们之间有一些关键的不同点：

1. AJAX (Asynchronous JavaScript and XML): AJAX 是一种技术，它允许在不重新加载页面的情况下更新网页的一部分。它是基于XHR (XMLHttpRequest)对象。
2. Fetch: Fetch API 是原生 JavaScript 的一部分，它提供了一个包含全局 fetch()方法的接口，它允许你发起网络请求，并获取响应，这个响应可以是文本、图片、JSON等。

3. Axios: Axios 是一个基于 Promise 的 HTTP 客户端，它在浏览器和 node.js 中都可以使用。它与 fetch 类似，但有一些重要的区别：

   • Axios 可以在浏览器和 node.js 中使用。
   • Axios 返回的是 Promise，如果你不熟悉 Promise，可能需要一些时间来理解。
   • Axios 可以在请求发送前后进行拦截请求和响应。

下面是每个的基本使用方法：

1. AJAX:

var xhr = new XMLHttpRequest();
xhr.open("GET", "url", true);
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

2. Fetch:

fetch('url')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

3. Axios:

axios.get('url')
  .then(response => console.log(response))
  .catch(error => console.error('Error:', error));

总结：

• 如果你需要在 node.js 环境中运行，使用 axios 是最好的选择。
• 如果你需要在浏览器中使用，并且需要更多的特性，如取消请求、自动转换JSON响应等，使用 axios 是最好的选择。
• 如果你的项目已经使用了 fetch，并且不想引入新的库，那么你可以继续使用 fetch。
• 如果你想要一个更简洁的语法，并且不需要在 node.js 中使用，那么你可以选择 jQuery $.ajax 方法，它也是基于 Promise 的。

由于篇幅限制，这里只提供原生Ajax和jQuery的示例代码。其他库（axios、fetch）和跨域技术（CORS、SONP）的详细解释和示例将在专题文章中给出。

原生Ajax

// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'api/some.json', true);
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为 200
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 处理请求响应的数据
      console.log(xhr.responseText);
    } else {
      // 处理错误情况
      console.log('请求失败');
    }
  }
};
 
// 发送请求
xhr.send();

jQuery Ajax

$.ajax({
  url: 'api/some.json',
  type: 'GET',
  dataType: 'json',
  success: function (data) {
    console.log(data);
  },
  error: function () {
    console.log('请求失败');
  }
});

这些示例展示了如何使用原生的XMLHttpRequest对象和jQuery的$.ajax方法来发送GET请求，并在成功获取响应时处理数据。在实际应用中，你可能需要根据具体需求调整HTTP方法、数据类型以及发送的数据。

在实现多文件上传时，我们通常需要将文件数据转换为FormData格式，以便通过HTTP请求发送。以下是使用axios和ajax实现多文件上传的示例代码。

使用axios上传多个文件

const axios = require('axios');
 
// 假设files是一个文件数组，例如通过<input type="file" multiple>获得
const files = document.querySelector('input[type=file]').files;
 
const formData = new FormData();
 
for (let i = 0; i < files.length; i++) {
    formData.append('file' + i, files[i]);
}
 
axios.post('/upload', formData, {
    headers: {
        'Content-Type': 'multipart/form-data'
    }
}).then(response => {
    console.log(response.data);
}).catch(error => {
    console.error(error);
});

使用jQuery $.ajax上传多个文件

const files = $('#file-input').get(0).files;
const formData = new FormData();
 
for (let i = 0; i < files.length; i++) {
    formData.append('file' + i, files[i]);
}
 
$.ajax({
    url: '/upload',
    type: 'POST',
    data: formData,
    processData: false,  // 告诉jQuery不要处理发送的数据
    contentType: false,  // 告诉jQuery不要设置Content-Type请求头
    success: function(response) {
        console.log(response);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.error('Error uploading files:', textStatus, errorThrown);
    }
});

在这两个示例中，我们首先获取文件列表，然后使用FormData对象将它们添加到请求中。在axios的情况下，我们需要将Content-Type设置为'multipart/form-data'，因为我们正在发送二进制数据。在jQuery的情况下，我们设置processData和contentType为false，这样jQuery就不会处理或设置请求的Content-Type，这对于文件上传是必要的。

要配置Nginx以允许前端通过axios或ajax进行跨域请求，您需要在Nginx配置文件中添加相应的location块，并设置必要的HTTP头来允许跨域资源共享（CORS）。

以下是一个简单的Nginx配置示例，它允许所有源的跨域请求：

server {
    listen 80;
 
    server_name your-domain.com;
 
    location / {
        # 配置实际的后端服务代理
        proxy_pass http://backend_server;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 
        # 添加CORS头部允许跨域
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
 
        # 预检请求响应
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }
    }
}

请根据您的实际需求修改your-domain.com和http://backend_server。

这个配置允许跨域请求，并处理预检请求，以确保axios或ajax可以成功发送跨域请求。