端口跨域配置

在vue.config.js文件中配置信息：

module.exports={

 pages: {
  index: {//入口
  entry: 'src/main.js',
  },
 },
 
 //打包时去掉map文件
 productionSourceMap:false,
 //关闭语法检查

 lintOnSave: false,
 // devServer: {//开启代理服务器(方式一)
 //   proxy: "http://localhost:5000"//表示代理服务器端口为5000端口，可以与已有的该端口进行交互了
 // },
    
 devServer: {
  proxy: {
      
   '/api1': {//前面加了这个符号表示走代理不走本地
	 target: 'http://39.98.123.211',
	 //要发请求时我们写的地址前面必须加上/api1这个标识来让其只走代理，
	 // 虽然地址里写的有/api1但是当正式发送请求时不能有这串代码，所以用正则来过滤掉它，
	 // 这样发送的一瞬间我们地址里的/api1就被过滤掉了
	 pathRewrite: { '^/api1': '' },//注意：这只是在代理时帮我们过滤掉了/api1，但我们写请求地址时还是要加上的
	 ws: true,//表示支持websocked
	 changeOrigin: true//允许跨域,将自己的地址隐藏为了5000,实际用于控制请求头中的host值
   },

	//配置第二个跨域端口
   '/api2': {//前面加了这个符号表示走代理不走本地
	target: 'https://api.ghser.com/qinghua',
	pathRewrite: { '^/api2': '' },
	ws: true,
	changeOrigin: true
   },
  }
 }
}

ajax二次封装

//对axios进行二次封装,主要是为了使用其请求和响应拦截器
import axios from "axios"
// 引入进度条
// 其中start方法代表进度条开始；done代表进度条结束
import nprogress from "nprogress";
//引入进度条的样式
import 'nprogress/nprogress.css'
// 引入仓库
import detail from "../store/detail"
// 利用axios对象方法create创造axios实例
const requests = axios.create({
    // baseURL: 基础路径，发送请求时路径里会出现并与url拼接
    //只所以要在后面添加/api1是因为我们在做代理服务器时标识了api1
    baseURL: "http://localhost:8080/api1",
    timeout: 5000,//请求超时时间
})
// 请求拦截器：在发送请求之前请求拦截器可以检测到，可以在请求发送之前做一些事情
requests.interceptors.request.use((config) => {// config为配置对象，其中有一个属性headers非常重要
    if(detail.state.getNanoId){//设置请求头，userTempId是后台设置的格式,
    //此处为为每一次请求都封装请求头，也可以在index.js中单独发送请求头
        config.headers.userTempId=detail.state.getNanoId
    }
    // 每次请求中都带上token令牌
    if(localStorage.getItem('token')){
        config.headers.token=localStorage.getItem('token')
    }
    //进度条开始动
    nprogress.start()
    return config;
})                                                                                                                                                                                                                                                                                                                                                                  
// 响应拦截器：可以在数据返回后做一些事情
requests.interceptors.response.use(
    (res) => { 
        //进度条结束
        nprogress.done();
        return res.data },
    (error) => {
        console.log(error.message);
        // 返回回调函数，终止promise
        return Promise.reject(new Error("false"))
    })

export default requests;

api配置

// 如果项目很小完全可以在生命周期函数中发送请求，axios.get("xxx")
// api统一管理文件
import requests from "./request"
import mockRequests from "./mockAjax"

//获取购物车接口
export const reShopCard = () => {//添加请求头方式headers:{userTempId:detail.state.getNanoId}
  return requests({ url: `/api/cart/cartList`, method: 'get' })
}

// 删除购物车接口
export const reDeleteCard = (skuId) => {
  return requests({ url: `/api/cart/deleteCart/${skuId}`, method: 'delete' })
}

// 修改购物车商品选中状态接口
export const reChangeCardIsChecked = (skuId, isChecked) => {
  return requests({ url: `/api/cart/checkCart/${skuId}/${isChecked}`, method: 'get' })
}

//用户注册,有三个参数，整合到一起去，(post请求可以带请求体)
export const reRegister = (data) => {
  return requests({
    url: `/api/user/passport/register`, data: data, method: 'post'
  })
}

//提交订单
export const reSubmitOrder = (tradeNo, data) => {
  return requests({
    url: `/api/order/auth/submitOrder?tradeNo=${tradeNo}`, data, method: 'post'
  })
}

get传参的两种方式

1.直接字符串拼接

axios.get('url?xx=xx&xx=xx')

2.使用params传参

axios.get('url',{
	params:{
		参数：xxx
		}
})