使用vue-cli脚手架搭建vue项目及使用axios配置解决跨域请求

一：如果没有安装nodejs需要先安装node

node官网http://nodejs.cn/download/%C2%A0，安装成功后，查看node版本

win+r 快速打开cmd.exe

node -v

顺便可以查看npm安装 npm -v

淘宝镜像cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org

二：全局安装npm install -g @vue/cli

查看版本 vue -V

三：创建项目

首先要进入要创建项目的目录

使用命令：vue create hlj

我是一直回车

安装成功.

按照提示：输入cd hlj进入项目目录；输入npm run serve 启动项目

项目启动成功，在浏览器直接输入：localhost:8080即可

项目目录结构：

二：axios的配置跨域

安装axios，在终端控制台：npm  insatall axios

安装前package.json文件中

 

安装后package.json文件中

开始使用：

在main.js中引入

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'// 引入

Vue.config.productionTip = false
Vue.prototype.$axios = axios // 挂载
new Vue({
  render: h => h(App),
}).$mount('#app')

页面上调用接口

结果：

在项目的根目录下新建vue.config.js文件

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
  lintOnSave: process.env.NODE_ENV !== 'production',
  devServer: { //跨域
    port: "8080", //端口号
    host: "localhost",
    open: true, //配置自动启动浏览器
    proxy: { // 配置跨域处理 可以设置多个
      '/axios': {
        target: 'http://api.douban.com',//跨域请求头信息
        changeOrigin: true,
        ws: false,
        secure: false, // 如果是https接口，需要配置这个参数
        pathRewrite: {
          '^/axios': ''
        }
      }
    }
  }
};

然后页面请求更改：

axiosF(){
this.$axios.get("axios/v2/movie/top250")
	.then(res=>{
		console.log(res)
	}).catch(err=>{
		console.log(err)
	})
}

 

重启项目后：

虽然接口报500的错误，但是已经不是跨域问题，如果接口没问题了，那么也就不存在跨域问题了。

到此，完成。