jeecg-boot (vue前端)解决跨域问题

1.设置在vue.config.js

这个项目的前端用的vue-cli 3设置在vue.config.js里面，不在以前的index.js里面，也没有proxytable参数，现在用的是：

devServer: {
          
   
    port: 3000,
    proxy: {
          
   
      /jeecg-boot: {
          
   
        target: http://localhost:8080, //请求本地 需要jeecg-boot后台项目
        ws: false,
        changeOrigin: true
      },
      /api: {
          
   
       target: http://localhost:8081,
       ws: false,
       changeOrigin: true,
       pathRewrite: {
          
   
         ^/api: 
       }
     }
    }
  },

2.重点是第二步

jeecg-boot对前端的axios做了封装，所以你用它的请求会自动加上baseUrl,根本不会到这个里面来拦截，所以我们页面引入的axios必须是它原来未封装过的：

import axios from axios

注意：千万不能引其它的

3.引用

在方法里面直接使用引入的axios:

axios({
          
   url:"/api/executeDebugger",  data:formData,
    headers: {
          
   "Access-Control-Allow-Origin": "*"},method:post}
  ).then((res) => {
          
   
    if (res.success) {
          
   
      let appEnvironment = res.result;
    } else {
          
   
      that.$message.warning(res.message);
    }
    this.loading = false;
  })

就可以访问到URL：http://localhost:8081/executeDebugger 了

4. nginx配置问题

打包到服务器上又出现了跨域问题，解决方案就是用nginx配置如下:

location /api {
          
   
           rewrite  ^.+api/?(.*)$ /$1 break;
           include  uwsgi_params;
           proxy_pass   http://localhost:8081; #此处修改为自己的请求地址
        }

位置：

记得要重启一下nginx服务器； 这下子问题彻底解决。