二、项目构建之发送请求以及跨域问题

请求发送

1、在项目中的是src/api下创建index.js，用于统一管理项目中的请求

import requests from "./request";
//发送请求
export const  reqDataList=()=> requests({url:'/datas/getData',method:'get'});

        这段代码定义了一个名为reqDataList的常量（const），其值为一个函数。该函数调用了一个名为requests的函数，并传入了一个对象作为参数。该对象有两个属性：url和method，分别表示请求的地址和请求的方式（get）。所以，该函数的作用是发送一个get请求，获取'/datas/getData'地址的数据。

2、发送请求

在要调用的模块中先引入

import {reqDataList} from '@/api';
//调用
reqDataList();

跨域问题

       跨域问题指的是在浏览器中，当一个网页通过 Ajax、WebSocket 或者其他方式向不同源（协议、域名、端口号任意一项不同）的服务器发送请求时，会受到同源策略的限制，从而不能得到服务器返回的数据或者执行对应的操作。

1、在项目中的vue.config.js中进行以下配置

 

module.exports = {
  //代理跨域
  devServer: {
    proxy: {
      '/api': {
        target: 'http://xxx.xxx.com',
        // pathRewrite: { '^/api': '' },
      },
    },
  },

}

        这段代码是用于配置开发服务器的代理跨域设置。具体来说，它的作用是将以 "/api" 开头的请求代理到目标地址为 "http://xxx.xxx.com" 的服务器上，从而实现跨域访问。其中，devServer 是 webpack-dev-server 的配置项，proxy 是代理设置，"/api" 是需要代理的路径前缀，target 是代理目标地址。注释掉的 pathRewrite 可以用于重写路径，将 "/api" 替换为空字符串，这样代理后的请求路径就不再包含 "/api"。

跨域的具体细节可见webpack,附上官网链接

DevServer | webpack 中文文档 | webpack 中文文档 | webpack 中文网