phpstudy+nginx+vue-cli+后端项目如何解决跨域调用问题

一、前言

 公司开发oehr项目使用前端的Vue2.6脚手架，但是登陆要跳转到CAS进行oss统一集中验证登录后返回验证token令牌，最后请求后端的数据。

二、部署过程

 ①在Vue脚手架运行npm run serve

 ②phpstudy借用nginx实现反向代理，解决跨域的根本措施。

域名就是你打开vue前端的路由地址，后面会映射到vue项目本地 http://192.168.121.158:1680。

③ 选择设置打开配置文件找到dev_oehr.eminxing_80 的serve配置文件

 下图中proxy 里的target就是上面设置的域名， /api对应nginx.conf里的/api/  这个是请求后端接口的路由 http://dev-oehr.eminxing.com/api/xxxxx

location /api/ {
   proxy_pass http://10.100.1.86;
}

下面的location没有先后优先级顺序，都可以访问。

源码：

# 项目运行
server {
        listen        80;
        server_name  dev-oehr.eminxing.com;
        root   "D:/phpstudy_pro/WWW/dev-oehr.eminxing.com";

        location / {
            proxy_pass http://192.168.121.158:1680; # vue运行地址
        }
        location /api/ {
            proxy_pass http://10.100.1.86; # 后端接口ip
        }
}
# api文档监听
server {
        listen        8081;
        server_name  dev-oehr.eminxing.com;
        root   "D:/phpstudy_pro/WWW/dev-oehr.eminxing.com";

        location / {
            proxy_pass http://10.100.1.86:8081; # 后端文档地址
        }
}