[Muxi_k] - Vue cli3 跨域请求

Vue cli3 跨域请求

---

问题

最近学了Vue 想写点demo练习一下 就用tp写了个接口

• 此时
  • server：api.org:80/users
  • client : 127.0.0.1:8080

当我写完请求后发现出问题了

// 请求代码
getUsersTable() {
      this.$http
        .get("api.org/users")
        .then(res => {
          console.log(res);
          this.users = res.body;
        })
        .catch(err => {
          console.error(err);
        });
    }

报错如下：
Access to XMLHttpRequest at 'http://api.org/users' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

发现是跨域问题

解决方法

1. 配置文件
   创建配置文件vue.config.js,与package.json 同级
2. 安装代理
   现在vue cli3默认是没有devServer的，需要手动安装

    $ npm install --save-dev http-proxy-middleware

3. 写入配置

module.exports = {
    devServer: {
        proxy: {
            //配置跨域
            '/api': {
                target: "http://api.org",
                ws: true,
                changOrigin: true,
                pathRewrite: {
                    '^/api': '/'
                }
            }
        }
    }
}

这里要把请求路径该一下：
.get("api.org/users")
改成:
.get("api/users")

注意问题

如果你是用tp写的接口
把 app.config里的　app_debug = true 改为　false
linux下
runtime 权限改为777

$ sudo chmod 777 runtime 

否则请求的时候会有服务器500错误

---

参考文献

https://cli.vuejs.org/zh/config/#devserver-proxy
https://github.com/chimurai/http-proxy-middleware#proxycontext-config