vue前端配置，实现跨域

前言：

由于现在一般人家使用vue都是使用脚手架进行开发，而脚手架版本一般都是3.0以上的，所以对于我这种初学者来说，学习axios的时候，遇到的问题，网上的解决方案很多都是针对于脚手架2的老古董，所以对于像我这种小白，体验不是很好。所以在此记录一下。

 

首先呢，前端人员进行开发的时候，肯定要和后端人员进行对接，而往往很多种情况下，前端开发拿到的测试接口或者可能正真上线时软件，前端项目与提供api接口的服务器不是同一个服务器，所以往往这时候拿不到数据，因为存在跨域问题，具体想了解跨域，为什么要有跨域，可以百度百科，或上维基百科看看跨域的定义。

 

正文：vue如何解决跨域。

解决跨域有两种方法：

1：服务器端设置跨域 ，若是使用express可以看看我的另一篇，express后端实现跨域处理
header(“Access-Control-Allow-Origin:*”);
header(“Access-Control-Allow-Headers:content-type”);
header(“Access-Control-Request-Method:GET,POST”);

2：可以自己设置一个代理服务器，使用proxy。

总结：由于第一种方法需要你拿的是你自己服务器的数据，才能对服务器进行设置，所以这种方法广泛性不是很好。

第二种方法，不管数据，提供api接口是自己的服务器，还是使用第三方Api接口都可以解决，所以本文介绍这种方法。

 

一.科普，为什么网上一些方法解决不了我们的问题

网上大部分说的是在config里面修改，但是在config文件夹下面进行修改是脚手架3以下的配置方法，因为脚手架3及以上，它的官方思想是0配置，它不建议你直接在config里面修改，所以脚手架3把这个配置文件隐藏的比较深，官方推荐我们采用扩展配置文件的做法，而不是直接像脚手架3以下那样直接修改配置文件。

 

1.首先在你的vue项目里新建一个vue.config.js文件，vue.config.js文件用于扩展基础配置，说白了就是像你玩游戏一样，你本来已经有鞋子这个装备了，但是扩展它，你的鞋子能力会有大幅提升。

 

 2.在vue.config.js文件代码如下：

module.exports = {
  publicPath:'/',
//1.为文件配置别名
  configureWebpack:{
    resolve:{
      alias:{
        'assets':"@/assets",
        'common':"@/common",
        'components':'@/components',
        'network':'@/network',
        'views':'@/views'
      }
    },
 
  },
     //2.配置跨域
     devServer:{
      //设置代理
      proxy:{
        "/api":{
          // target用于配置你允许访问数据的计算机名称，即是你的api接口的服务器地址
          target: 'http://v.juhe.cn',
          ws:true,//启用webSocket
          changeOrigin:true,//开启代理跨域
          pathRewrite:{
            '^/api':""
          }
        }
      },
    }
}

实际上你要配置，实现跨域，只需要配置上面第2代码部分，但是呢，我把其它配置也贴出来，只是想告诉你，这个文件可以扩展多个功能不同的配置~　

现在对上面的一些参数进行解释说明，devServer是用于服务器配置，proxy是代理的意思，/api是你随意起的名称，作用是起到别名的作用，就是给你的target里面的接口地址起别名。

　

 

这样代理配置已经写好了。接下来可以请求数据了，这个时候“/api”这个别名就起到好处了。

(3)数据请求

你可以看一下我项目里的网络请求的目录，我把所有网络请求都放在一个文件夹里，实际上，你虽然可以在main.js里面写网络请求，但是这样不利于网络请求的划分与管理。

 

 把所有网络请求都建立一个js文件，这样更加见名知意。

首先request请求里面统一你的request请求，不管是post方式还时get都可以封装成不一样的方法放在里面，但是，默认axios，你没有指明方法，它是get请求，这个你可以去看看官方的axios文档，这个非常有用，你使用人家的东西，不懂怎么用，首先第一步不是去网上看看别人提供的方法，应该去网上看官方文档，官方文档可以解决你99%的疑问。

废话不多说，上我的request.js的代码。

import axios from 'axios'

export function request(config){
  // 1.创建axios实例
  const instance = axios.create({
    baseURL:'/api',
    timeout:5000
  })
//2.应用场景：服务器返回数据后进行处理，拦截不需要的垃圾数据,我这里没有拦截，只是把拿到的res结果继续返回出去，实际上如果你的res里面你只想拿到它的data，你可以直接return res.data
//这样你就达到过滤res的其它数据的目的
instance.interceptors.response.use(res => {
  // console.log(res)
  return res
},err => {
  console.log(err);
  console.log(baseURL)
})

  //3.发送网络请求
  return instance(config)
}

home.js的代码，这里的home.js拿到的数据只给home页面使用，而且你可以直接导入request里你定义的方法，达到复用request里面定义方法的目的，这样你不用每次发一个get或者post请求都去再定义一个request方法。

import {request} from './request'

// 请求历史上的今天数据
export function getHistoryToday(){
  return request({
//url是你的api接口
//我这里用的是聚合数据里面的免费数据，key里面你要写上他官方提供给你的appKey,这样才有权访问它的数据。
    url:'/todayOnhistory/queryDetail.php?key=AppkeyID'
  })
}

　最后在你要使用这个网络请求的组件导入这home.js的方法

 

（4）网络请求导入组件

下面直接贴代码

<script>
// 导入网络请求
import {getHistoryToday} from 'network/home'
export default {
  name: 'Home',
  components: {
    mySwiper,
    newsList
  },
  created() {
    this.getHistoryToday()//页面被创建时就请求数据
  },
  methods: {
    getHistoryToday(){
      getHistoryToday().then(res => {
        console.log(res)
        console.log(this.url)
      })
    }
  },
}
</script>

import {getHistoryToday} from 'network/home'

注意：上面这个的大括号不能省略，在vue中，由于这里的getHistoryToday函数是直接export的所以你必须以{}方式引入，如果是以export default方式导出的，你就可以给它起别名。

这样引入 import gettoday from ''network/home"

　

（5）浏览器正确打印数据