阅读 92

vue 实战中常见的报错及解决方案【二】

配置代理并测试接口实现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提示请求为跨域请求

配置代理并测试接口:

  • 除了设置让服务器允许跨域的方法之外,还可以通过配置代理实现跨域请求
  1. 在项目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': ''
    }
  }
},
复制代码
  1. 修改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')
    // 下面修改后的接口省略...
    复制代码
  2. 因为修改了项目的config文件,所以需要重启项目npm run dev

  3. 此时可以在控制台看到跨域请求到的数据{code: 0, data: Array(16)}

文章分类
前端
文章标签