Vue webpack项目配置请求接口,修改代理,解决跨域问题

在写项目的时候,经常会遇到一些请求和跨域问题。

比如接口请求不到:Uncaught (in promise) Error: Request failed with status code 404 或者 http://localhost:8081/list 404 (Not Found)

跨域问题:Access to XMLHttpRequest at 'loaclhost:3000/list' from origin 'http://localhost:8081' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. 等。

这时候我们可以修改一些 Vue 项目的配置,添加代理,解决接口请求不到或者跨域问题。

找到项目文件夹下的 /config/index.js 文件,添加如下配置:

proxyTable: { // 设置代理
  '/api': {
    target: 'http://localhost:3000',  // 后台接口地址
    ws: true,        // 如果要代理 websockets,配置这个参数
    secure: false,  // 如果是https接口,需要配置这个参数
    changeOrigin: true,  // 是否跨域
    pathRewrite: {
      '^/api': ''
    }
  }
},

这样就可以请求成功了。

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)