方法1:

利用vue-cli自带的反向代理配置proxyTable,在modules.export中配置如下:

proxyTable: {
      '/api': {
        target: 'http://localhost:8080',// 请换成你的后端ip地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

前台利用axios发送ajax请求方法为:

this.$axios({ url: '/getUser',method: 'get',baseURL:'/api'}).then(res=>{
          console.log(res.data);});

或者

this.$axios.get("api/getUser").then(res=>{
          console.log(res.data);
        })

这个设置的方法来自于vue-cli使用的模板插件 vuejs-templates,其作用相当于在本地部署了一个反向代理服务器解决跨域问题,文档里有说明和实例

vuejs-templates官方文档

值得注意的是,方法1只能在开发时使用。

方法2:

前端项目用反向代理工具nginx部署启动,配合nginx的反向代理配置实现跨域访问。

1. 前端项目的build

命令行进入项目根目录下,运行命令

npm  run build

将打包生成dist目录

2. nginx的配置

server {
        listen       8081; //监听端口,因为我再本地8080部署后端,故用8081
        server_name  localhost 10.45.145.192;


        #charset koi8-r;


        #access_log  logs/host.access.log  main;


        location / {#/表示匹配访问根目录
            #root   html;#用于指定访问根目录时,访问虚拟主机的web目录
	    root D:/VueDemoSites/mi-shop-master/dist; #vue项目build的dist目录
            index  index.html index.htm;#在不指定访问具体资源时,默认展示的资源文件列表
        }
        location /api {
           rewrite  ^.+api/?(.*)$ /$1 break;
           include  uwsgi_params;
           proxy_pass   http://localhost:8080;//后端部署ip:端口
       }

以上分别为root和前台ajax请求发起时映射的后端ip和端口配置。

ajax请求方式如方法1,启动nginx,用配置的监听端口浏览器访问web,同样可以实现跨域访问。并且可以同时配置多个服务器地址。



Logo

前往低代码交流专区

更多推荐