linux nginx部署vue项目 实现跨域

一、前端

1. 不需要配置  proxyTable

config/index.js  这个文件下的   proxyTable 不需要改写，不需要做跨域处理 （配置了也可以，不影响跨域）

 

2.  前端请求调用后端接口

axiosGet() {
  this.$axios.get('/api/city/1').then((response) => {
      console.log(response)
      this.city = response.data
    })
}

       '/api/city/1'   为 请求地址， /api  会在 nginx  配置文件里 做转发， 

前端所有请求都使用相对地址，假设都以“/api”开头，说明一下“/api”并不是接口URL中真实存在，只是为了统一代理才加上的，

然后在 nginx/conf/nginx.conf  文件下的  server模块中添加配置

        3.   需要将 vue 项目   npm run build   编译生成的 dist 文件夹  放置于    nginx  html文件夹下

        路径  ：    /usr/local/nginx/html/

 

二、nginx 配置

         location / {
            root   html/dist;                                    # 前端项目放置的目录
            index  index.html index.htm;
            try_files    $uri $uri/ @router;             #
        }

        location /api/ {
            rewrite ^/api/(.*) /$1 break;                   # 做 统一代理
            proxy_pass    http://172.16.50.106:8011;    #  后端服务  ip、端口
        }

nginx 配置 修改部分如上，其他的按照初始的来

文件路径  /usr/local/nginx/conf/nginx.conf

 

三、 后端服务

       后端服务 提供 调用接口

       例如  ： http://172.16.50.106:8011/city/1