vue跨域请求数据

vue跨域请求数据

本篇文章基于vue-cli编写

问题描述

当出现如下关键词，证明我们正在执行跨域问题



此时证明我们违背了同源策略（即协议名、ip、端口号一致）

环境准备

首先，要想实现跨域请求数据，就离不开vue.config.js和axios，所以如果没有vue.config.js这个文件的话，就得先创建vue.config.js这个文件

添加vue.config.js配置

创建位置如下(注意与package.json在同一级目录下)



在vue.config.js中添加代理信息

module.exports = {
    devServer: {
      proxy: {
        '/api1': {
          target: 'http://localhost:5000',//代理的目标路径
          changeOrigin: false,
          pathRewrite: {'^/api1':''}//重写请求路径，将路径中的'/api1'替换成''
        },
          '/api2': {
              target: 'http://xxx.x.xxx.xx:8800',
              changeOrigin: true,
              pathRewrite: {'^/api2':''}
          }
      }
    }
  }
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000（xxx.x.xxx.xx:8800）
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

使用axios

安装axios:npm i axios

在需要使用axios的地方引入axios： import axios from 'axios'

axios(config)

axios({
  method: 'post',//不填默认get
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

axios(url[, config])

// 发送 GET 请求（默认的方法）
axios('/user/12345');

使用别名访问

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

请求配置

请看官网axios

使用案例

//http://localhost:8080发出请求的服务器协议，ip，端口号
axios.post('http://localhost:8080/api2/api/data',
       {
          start:'202101',
          end:"202105"
        }).then(
          Response=>{
            console.log("请求成功了！");
            console.log(Response.data);
            //想做的事情：this.chartData=Response.data.chartData
          },
          error=>{
              console.log("请求失败！",error.message);
          }
        )