我希望通过xmlhttprequest写个JS文件，引入该JS文件到html页面，可以拦截页面中的请求，并发送新的请求

好的，你可以使用XMLHttpRequest对象来实现拦截请求并发送新的请求。具体实现步骤如下：

1. 创建一个新的XMLHttpRequest对象。

2. 使用open()方法指定HTTP请求的方法、URL和异步标志。

3. 使用setRequestHeader()方法设置HTTP请求头。

4. 使用send()方法发送HTTP请求。

5. 监听XMLHttpRequest对象的onreadystatechange事件，在该事件的回调函数中处理响应数据。

以下是一个示例代码：

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 定义onreadystatechange事件的回调函数
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 处理响应数据
    console.log(xhr.responseText);
  }
};

// 发送HTTP请求
xhr.open('GET', 'http://example.com', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send();

你可以将上述代码保存为一个JS文件，并在HTML页面中引入该文件，即可实现拦截请求并发送新的请求的功能。

相关问题

XMLHttpRequest 产生跨域请求

XMLHttpRequest 是浏览器提供的 API，用于在 JavaScript 中发送 HTTP 请求。由于同源策略的限制，浏览器默认不允许 JavaScript 跨域请求资源。也就是说，如果你的网页在一个域名下，想要请求另一个域名的资源，浏览器会拦截这个请求，并抛出一个 CORS 错误。

要解决跨域请求的问题，可以通过配置目标域名的 CORS 响应头来允许跨域访问，或者使用 JSONP、服务器代理等技术来绕过跨域限制。另外，HTML5 中引入的跨域资源共享（CORS）标准也提供了一种标准的跨域解决方案，可以让服务器端控制哪些域名可以跨域访问自己的资源，从而实现更加安全可靠的跨域请求。

这是axios封装的代码：import Vue from "vue"; //导入axios import axios from "axios"; //创建axios的实例 const http = axios.create({ //baseURL baseURL: "http://localhost:9999/api", //请求超时时间 //timeout: 1000, //前端设置跨域 //设置可跨域的请求头格式，可以避免让后端增加@CrossOrigin注解 headers: { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "POST, GET, OPTIONS, PUT, DELETE", "Access-Control-Allow-Headers": "Content-Type, X-Auth-Token, Origin, Authorization", }, }); //设置X-Requested-With的请求头（非必须），可以根据实际框架使用或去除 //注意：此处的请求头，和上面的headers的请求头，二者是两码事，作用是不一样的，也不会相互冲突 http.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest"; //请求拦截器 http.interceptors.request.use( //发送请求之前，做些什么... (config) => { return config; }, //请求错误时，做些什么... (error) => { return Promise.reject(error); } ); //响应拦截器 http.interceptors.response.use( (response) => { // 对响应数据做些什么 return response; }, (error) => { // 针对响应错误代码，做些什么... if (error.response) { //根据HTTP状态码，来进行处理 //其它状态码，直接在这里继续追加即可 switch (error.response.status) { case 401: //未登录，跳转到登录页 break; case 403: //没有权限，跳转到403页面 break; case 404: //请求的资源不存在，跳转到404页面 break; case 500: //服务器内部错误，跳转到500页面 break; default: //其他错误，弹出错误信息 Message.error( error.response.data.message || "服务器异常，请稍后再试！" ); break; } } else { //请求超时或者网络异常，弹出错误信息 Message.error("网络异常，请稍后再试！"); } return Promise.reject(error); } ); //向外共享axios的实例对象 export default http;然后，我发起请求错误后为啥不弹出弹框

你需要在响应拦截器的错误处理代码中，使用ElementUI的Message组件弹出错误信息。在你的Vue组件中引入Message组件：

import { Message } from 'element-ui';

然后，在响应拦截器中使用Message组件弹出错误信息：

http.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response;
  },
  error => {
    // 针对响应错误代码，做些什么...
    if (error.response) {
      //根据HTTP状态码，来进行处理
      //其它状态码，直接在这里继续追加即可
      switch (error.response.status) {
        case 401:
          //未登录，跳转到登录页
          break;
        case 403:
          //没有权限，跳转到403页面
          break;
        case 404:
          //请求的资源不存在，跳转到404页面
          break;
        case 500:
          //服务器内部错误，跳转到500页面
          break;
        default:
          //其他错误，弹出错误信息
          Message.error(
            error.response.data.message || "服务器异常，请稍后再试！"
          );
          break;
      }
    } else {
      //请求超时或者网络异常，弹出错误信息
      Message.error("网络异常，请稍后再试！");
    }
    return Promise.reject(error);
  }
);

在这个例子中，我们在响应拦截器的错误处理代码中使用了Message.error()方法，弹出了错误信息。其中`error.response.data.message`是错误信息，使用`Message.error()`方法可以在页面上弹出错误提示。