服务器代理跨域请求设置

Author: dawpf

.env.development

@@ -0,0 +1,3 @@
+module.export = {
+  VUE_APP_URL = https://www.easy-mock.com/mock/example_dev
+}

.env.production

@@ -0,0 +1,3 @@
+module.export = {
+  VUE_APP_URL = https://www.easy-mock.com/mock/example_pro
+}

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+/devdist
 
 # local env files
 .env.local

src/App.vue

@@ -3,24 +3,11 @@
     <div id="nav">
       <router-link to="/">Home</router-link>|
       <router-link to="/about">About</router-link>
-      <div>计算属性:{{appData}}</div>
-      <div>调用方法:{{this.$store.state.app_data}}</div>
     </div>
     <router-view />
   </div>
 </template>
 
-<script>
-import { mapState } from 'vuex'
-
-export default {
-  computed: {
-    ...mapState({
-      appData: state => state.app_data
-    })
-  }
-}
-</script>
 
 <style lang="less">
 #app {

src/api/home.js

@@ -4,3 +4,7 @@ import Service from "@/utils/service.js"
 export function getMockData_home() {
   return $HTTP.get(Service.mock)
 }
+
+export function getProxtData() {
+  return $HTTP.get('/api/v2/movie/in_theaters')
+}

src/store/index.js

@@ -4,18 +4,8 @@ import Vuex from "vuex";
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {
-    app_data: 100
-  },
-  mutations: {
-    add_app_data(state, num) {
-      state.app_data += num
-    }
-  },
-  actions: {
-    add_app_data_action(content, num) {
-      content.commit('add_app_data', num)
-    }
-  },
+  state: {},
+  mutations: {},
+  actions: {},
   modules: {}
 });

src/utils/HTTP.js

@@ -4,7 +4,8 @@ import { getToken } from '@/utils/auth'
 // create an axios instance
 const request = axios.create({
   // baseURL: process.env.VUE_APP_URL,
-  baseURL: 'https://easy-mock.bookset.io/mock/5e90379d00bfc566e5bb1acb/example',
+  // baseURL: 'https://easy-mock.bookset.io/mock/5e90379d00bfc566e5bb1acb/example', // 测试用地址
+  baseURL: process.env.NODE_ENV === "development" ? '' : process.env.VUE_APP_URL, // 使用代理时，baseURL 在本地服务器设置为空
   // withCredentials: true,  // 跨域请求时发送cookie
   timeout: 60000
 })
@@ -15,27 +16,24 @@ const TOKEN = getToken()  // 获取token
 request.interceptors.request.use(
   config => {
     if (TOKEN) {
-      // let each request carry token
-      // ['X-Token'] is a custom headers key
-      // please modify it according to the actual situation
       config.headers['Authorization'] = TOKEN
     }
 
     // 扩展管理--expands:[]
-    if (config.params && config.params.expandList) {
-      const expandList = config.params.expandList
-      const expands = {}
-      if (expandList && expandList.length) {
-        expandList.map((item, index) => {
-          expands[`expands[${index}]`] = item
-        })
-        config.params = {
-          ...config.params,
-          ...expands
-        }
-      }
-      delete config.params.expandList
-    }
+    // if (config.params && config.params.expandList) {
+    //   const expandList = config.params.expandList
+    //   const expands = {}
+    //   if (expandList && expandList.length) {
+    //     expandList.map((item, index) => {
+    //       expands[`expands[${index}]`] = item
+    //     })
+    //     config.params = {
+    //       ...config.params,
+    //       ...expands
+    //     }
+    //   }
+    //   delete config.params.expandList
+    // }
 
     return config
   },

src/views/Home.vue

@@ -1,12 +1,7 @@
 <template>
   <div class="home">
     <img alt="Vue logo" src="../assets/logo.png" />
-    <div>
-      <button style="border:1px solid #000" @click="btnClick">点击增加20</button>
-    </div>
-    <div>
-      <button style="border:1px solid #000" @click="btnClick1">点击增加30</button>
-    </div>
+
     <HelloWorld msg="Welcome to Your Vue.js App" />
   </div>
 </template>
@@ -15,24 +10,17 @@
 // @ is an alias to /src
 import HelloWorld from '@/components/HelloWorld.vue'
 
-import { getMockData_home } from '@/api/home.js'
+import { getMockData_home, getProxtData } from '@/api/home.js'
 
 export default {
   name: 'Home',
   components: {
     HelloWorld
   },
   async created() {
-    let res = await getMockData_home() // 发起请求
-    console.log('获取到的请求回来的数据为:', res)
-  },
-  methods: {
-    btnClick() {
-      this.$store.commit('add_app_data', 20)
-    },
-    btnClick1() {
-      this.$store.dispatch('add_app_data_action', 30)
-    }
+    // let res = await getMockData_home() // 发起请求
+    let res = await getProxtData()
+    console.log('代理获取到的请求回来的数据为:', res)
   }
 }
 </script>

vue.config.js

@@ -20,6 +20,15 @@ module.exports = {
     overlay: {
       warnings: true,
       errors: true
+    },
+    proxy: {
+      '/api': {
+        target: 'http://t.yushu.im',     //代理的目标地址，这是豆瓣接口地址网址
+        changeOrigin: true,              //是否设置同源，输入是的
+        pathRewrite: {                   //路径重写
+          '/api': ''                     //选择忽略拦截器里面的单词
+        }
+      }
     }
   },
   configureWebpack: {  // 覆盖webpack默认配置的都在这里