Vue3利用Axious调用远程接口并利用Nginx部署上线

Vue3利用Axious调用远程接口并利用Nginx部署上线

背景：最近开始用Vue开发项目，需要在项目中调用远程接口，直接调用报跨域问题，查询了很多资料最终得到解决，本篇记录用前端解决跨域
问题的方法。分为本地开发环境和生产环境两种情况。

1.运行环境 ：

利用vue-cli做项目脚手架、Axious发送请求、远程服务器利用Nginx做代理

2.解决思路：

1. 跨域问题的产生是因为违反了浏览器的同源策略,即：协议、地址、端口号必须相同，对于客户端(即：浏览器)和服务器（即：需要调用的远程服务）之间是有跨域存在的，而在服务器之间的调用是不会产生跨域问题的，如果客户端本地做一个代理服务器，本地的代理服务器再访问远程的服务，就可以解决跨域问题。大致如下图：
   

3.解决问题：

1. 如果是本地开发环境，则vue-cli已经自带了代理服务器的功能，只需要做一些配置即可，配置步骤如下：
   1. 在前端根目录下创建vue.config.js文件，如图：
   
   2.在vue.config.js文件中增加如下内容：

   const { defineConfig } = require('@vue/cli-service')
   module.exports = defineConfig({
     transpileDependencies: true,
     lintOnSave:false,
     outputDir:'dist',
     publicPath:'./',
     devServer: {
       proxy:{
         '/reUnderstand':{
           target:'http://10.128.6.123:8080',//将 /reUnderstand开头的请求转发到 http://10.128.6.123:8080
           changeOrigin: true,//允许跨域
           pathRewrite:{
             '^/reUnderstand':''
           }
         }
       }
     }
   })
   

   3.发送请求

   axios.get('/reUnderstand/optimus/test/understand/patient/'+hospitalId+'/'+admissionId, {params:{
               esRead:false,
               esWrite:true,
               scene:stage
             }}).then(function(response){
             console.log(response);}
   

   4.重启服务，执行：npm run serve即可

2. 如果是远程生产环境，本地的Vcli代理会失效，需要利用Nginx做代理服务器转发客户端请求，如图：
   
   1.安装Nginx(比较简单，省略)
   2.找到nginx.conf文件（在nginx目录的conf文件夹下）进行配置
   3.配置如下：

   server {
          listen 8101;
          server_name localhost; #建议写成ip地址形式
          root /blzk/optimus_visual/front/dist;
      
          location / {
              try_files $uri $uri/ /index.html =404;
              client_max_body_size 1000m;
          }
   
          location ~ .*\.(gif|jpeg|bmp|swf|css|js)$ {
              expires 30d;
          }
     
          location /group1/M00{
                   root /opt/fastdfs/data;
                   ngx_fastdfs_module;
           }
   
          error_page 500 502 503 504 /50x.html;
          location = /50x.html {
                   root html;
          }
   	   #实现转发的关键配置，将/reUnderstand开头的请求转发到 proxy_pass地址
          location ^~ /reUnderstand{
   	        proxy_pass http://ip:port/; #例如：http://10.128.3.166:8888
          }
   }
   

   4.重启nginx：进入sbin目录下，执行命令：./nginx -s reload 即可