• 服务器配置(修改端口，反向代理解决跨域) dveServer

当我们遇到默认端口号8080被占用，我们需要使用dveServer.port修改端口号
案例：
请求猫眼电影的数据
https://m.maoyan.com/ajax/movieOnInfoList

  1. // vue.config.js
  3. module.exports = {
  4.     // 服务器配置
  5.    devServer: {
  6.        port: 9000, //服务器端口修改 
  7.        proxy: {
  8.            // 标识符：反向代理的配置项
  9.            // 标识符我们选择接口中统一存在的路径，请求路径的域名后的第一个路径设为标识符
  10.            '/ajax': {
  11.                target: 'https://m.maoyan.com', // 模板源
  12.                changeOrigin: true, //使用我们的源来代替目标源
  13.                /* 
  14.                    https://m.maoyan.com/ajax/movieOnInfoList 目标源
  15.                    https://localhost:9000/ajax/movieOnInfoList 我们的
  16.                */
  17.            }
  18.        }
  19.    }
  20. }
  1. // App.vue
  3. <template>
  4.     <button @click="getmsg">click here send request</button>
  5. </template>
  7. <script lang="ts">
  8. import { defineComponent } from 'vue'
  9. // 项目目录下 yarn add axios下载
  10. import axios from 'axios' // 引入 axios
  11. export default defineComponent({
  12.   data(){
  13.     return{
  14.       msg:null
  15.     }
  16.   },
  17.   methods:{
  18.     getmsg(){
  19.       axios({
  20.         // 请求路径：https://m.maoyan.com/ajax/movieOnInfoList
  21.         url: '/ajax/movieOnInfoList',
  22.         params:{
  23.           token:'',
  24.           optimus_uuid:'F04A6B70984011EB89DA9FC9709563EEE1FC4395B1554473B6696781D0EF2CDC',
  25.           optimus_risk_level:71,
  26.           optimus_code:10
  27.         }
  28.       }).then(res=>{
  29.         console.log(res)
  30.       }).catch(error=>Promise.reject(error))
  31.     }
  32.   }
  33. })
  34. </script>

Request URL:
https://m.maoyan.com/ajax/movieOnInfoList？token=&optimus_uuid=F04A6B70984011EB89DA9FC9709563EEE1FC4395B1554473B6696781D0EF2CDC&optimus_risk_level=71&optimus_code=10

vue脚手架配置代理

方法一：

在 vue.config.js 中添加如下配置：

  1. module.exports = {
  2.   ......
  3.   devServer: {
  4.     proxy: 'http://localhost:5000'
  5.   }
  6. }

说明：

  1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
  2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。

（如请求family，public文件夹里有family文件则之前请求该文件，不走代理。）

  1. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

方法二：

vue.config.js 配置具体代理规则：

  1. module.exports = {
  2.   devServer: {
  3.     proxy: {
  4.       '/api': { // 匹配所有以 '/api' 开头的请求路径
  5.         target: 'http://localhost:5000', // 代理目标的基础路径
  6.         changeOrigin: true,
  7.         pathRewrite: {'^/api':''}
  8.       },
  9.       '/foo': {
  10.         target: 'http://localhost:5001',
  11.         changeOrigin: true,
  12.         pathRewrite: {'^/foo':''}
  13.       },
  14.       ......
  15.     }
  16.   }
  17. }
  18. // changeOrigin 设置为true时，服务器收到的请求头中的host为: localhost:5000
  19. //                                     false时，                                                     localhost:8080
  20. //                     默认值为 true。

说明：

  1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
  2. 缺点：配置略微繁琐，请求资源时必须加前缀。

请求：

  1. axios.get('http://localhost:8080/family').then(
  2.   response => {
  3.     console.log('请求成功了', response.data);
  4.   },
  5.   error => {
  6.     console.log('请求失败了', error.message);
  7.   }
  8. )