最近在阿里云上买了一个域名和两个服务器，一个服务器内地的还在审核，另一个是香港服务器，想把之前做的一些小demo放上面运行看看，顺便了解线上跨域问题。

前端跨域问题可以从两个方面入手：

1. 开发环境时的跨域解决

  • 前端环境变量设置
1
2
3
4
5
//.env.development文件
VUE_APP_FLAG = "/devApi"

//跨域地址
VUE_APP_APIURL = 'http://www.web-jshtml.cn/productapi/token'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
//axios
import axios from "axios";

let baseUrl = process.env.VUE_APP_FLAG;

const service = axios.create({
    baseURL: baseUrl,
    timeout: 5000,
});

// 添加请求拦截器
service.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    let data = response.data;

    if (data.resCode !== 0) {
        ElMessage({
            showClose: true,
            message: data.message,
            type: "error",
        });
        return Promise.reject(error);
    } else {
        return response
    }

}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

export function GetSms(data) {
    return service.request({
        url: '/getSms/',
        method: 'post',
        data
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//页面调用
setTimeout(() => {
        GetSms(data)
          .then((res) => {
            console.log(route);
            // console.log(router);
            console.log(res);
            ElMessage({
              showClose: true,
              message: res.data.message,
              type: "success",
            });

            // 倒计时
            // 启用登录注册按钮
            countDown(60);
          })
          .catch((error) => {
            console.log(error);
          });
      }, 1500);
  • vue.config.js文件配置跨域
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// webpack-dev-server 相关配置
  devServer: {
    open: false, // 编译完成是否打开网页
    host: '0.0.0.0', // 指定使用地址，默认localhost,0.0.0.0代表可以被外界访问
    port: 8080, // 访问端口
    https: false, // 编译失败时刷新页面
    hot: true, // 开启热加载
    hotOnly: false,
    proxy: {
      // 后端的接口：http://www.web-jshtml.cn/productapi/token  接口：/getCode/
      [process.env.VUE_APP_FLAG]: {
        target: process.env.VUE_APP_APIURL, //跨域API服务器的地址
        changeOrigin: true,
        ws: false, //webscoket
        pathRewrite: {
          [`^${process.env.VUE_APP_FLAG}`]: ''
//  查找开头为/process.env.VUE_APP_FLAG 的字符串(/devApi) 替换成空字符串 '' 只剩下后面的字符串(/getSms)会拼接到target --> 最后为 http://www.web-jshtml.cn/productapi/token/getSms
        }
      },
   }
  • 当前端项目打包上线后，vue.config.js的配置不能起作用了，需要在线上服务器进行配置

2. 生产环境时的跨域问题

  • 服务器安装nginx服务器（为了方便使用宝塔Linux面板安装，宝塔软件安装目录在/www/server/下）

  • nginx的配置 把dist中的内容放到nginx安装目录下的html文件夹里

  • 也可以在conf文件夹的nginx.conf中修改要映射的文件夹

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
///www/server/nginx/conf/nginx.conf
http {
    server {
        listen       80;             //监听的端口
        server_name  localhost;              

        location / {              // 表示 以'/'开头的请求怎样处理
            root   /www/server/nginx/html;   //指定root文件夹为 上面提到的html文件夹
            index  index.html index.htm index.php;               //返回index.html
        }
        
        location /devApi/ {
            //add_header 'Access-Control-Allow-Origin' '*';
            proxy_pass    http://www.web-jshtml.cn/productapi/token/;
        }

    }
    
    server
    {
        listen 80;
        server_name wyz.baicaitang.top;
        
        location / {
          root  /www/server/nginx/html;
          index index.html index.htm index.php;
        }
        
        location /devApi/ {
            proxy_pass    http://www.web-jshtml.cn/productapi/token/;
        }

        access_log  /www/wwwlogs/access.log;
    }
}
  • 更改完需重载nginx：nginx -s reload