vue 实战中常见的报错及解决方案【二】配置代理并测试接口实现ajax跨域请求还未全部完成！！项目地址在实际开发中，

配置代理并测试接口实现ajax跨域请求

还未全部完成！！项目地址

在实际开发中，浏览器为确保安全，默认不允许跨域请求，那么我们如何去实现ajax跨域请求呢？

问题分析：

目前为止运行的所有页面都是静态页面

接下来先测试使用封装的ajax接口请求函数来异步获取数据

// 先在App.vue中引入封装的接口函数
import {reqCategorys} from './api'
// 然后再调用接口，测试打印数据
export default {
  async mounted () {
    const result = await reqCategorys()
    console.log(result)
  },
  components: {
    FooterGuide
  }
}

打开浏览器，运行项目会报错 GET http://local:4000/index_category 404(Not Found)

此时想起后端API端口为4000，然后在api文件夹下的index.js中修改测试

// 定义BASE_URL
const BASE_URL = 'http://local:4000'
// 然后修改请求接口的url
export const reqCategorys = () => ajax(BASE_URL + '/index_category')

然后再打开项目，发现依然报错access-control-allow-origin提示请求为跨域请求

配置代理并测试接口：

除了设置让服务器允许跨域的方法之外，还可以通过配置代理实现跨域请求

在项目config文件夹下的index.js文件里设置代理配置表

// Paths
// 静态资源文件夹
assetsSubDirectory: 'static',
// 发布路径
assetsPublicPath: '/',

// 代理配置表，在这里可以配置特定的请求代理到对应的API接口
// 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'
proxyTable: {
  '/api': { // 匹配所有以 '/api'开头的请求路径
  	target: 'http://localhost:4000', // 代理目标的基础路径
    // secure: false,  // 如果是https接口，需要配置这个参数
    changeOrigin: true, // 支持跨域
    pathRewrite: { // 重写路径: 去掉路径中开头的'/api'
      '^/api': ''
    }
  }
},

修改api文件夹index.js里接口函数的请求路径

// const BASE_URL = 'http://local:4000'
const BASE_URL = '/api'

export const reqAddress = geohash => ajax(`${BASE_URL}/position/${geohash}`)
export const reqCategorys = () => ajax(BASE_URL + '/index_category')
// 下面修改后的接口省略...

因为修改了项目的config文件，所以需要重启项目npm run dev
此时可以在控制台看到跨域请求到的数据{code: 0, data: Array(16)}