《前后端解决跨域问题》

发表于 分类于 Valine：

所谓的跨域是一种浏览器的安全机制导致的，也就是同源策略，如果出现非同源（协议、域名、端口号都相同，只要有一个不相同，那么都是非同源），浏览器就会形成跨域，比如说我们常见的一个端口去访问另一个端口的资源时，就会发出跨域请求，注意的是跨域是浏览器同源策略导致的，服务器与服务器之间没有跨域这个说法。

解决跨域的方法有很多，比如前端的代理服务器访问

JSONP 方案

使用 jsonp 实现，网页通过 script 标签去向服务器请求 json 数据，服务器收到请求后将数据放在一个指定名字的回调函数的参数里面传输给前端。

1
2
3
4
5
6
7
8
9
10
11
<script src="http://www.test.com/getData?callback=getData"></script>
// 向服务器test.com发出请求，该请求的查询字符串有一个callback参数，用来指定回调函数的名字

// 处理服务器返回回调函数的数据
<script type="text/javascript">
    // 服务器返回的数据会放到回调函数里面
    function getData(res){
        // 处理获得的数据
        console.log(res.data)
    }
</script>

Vue 中服务器代理

在 vue 的配置文件中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
  devServer: {
    open: true,
    port: "9595",
    proxy: {
      //配置跨域
      "/api": {
        target: "https://xxxxxxxx", //这里后台的地址模拟的;应该填写你们真实的后台接口
        changOrigin: true, //允许跨域
        pathRewrite: {
          /* 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/core/getData/userInfo 时
                实际上访问的地址是：http://121.121.67.254:8185/core/getData/userInfo,因为重写了 /api
                */
          "^/api": "",
        },
      },
    },
  },
};

在 configs.js 文件中，添加下面判断开发环境还是生产环境。更改 baseUrl

1
2
3
4
5
6
7
const noAuthAxios = axios.create();
const authedAxios = axios.create();

const isPro = Object.is(process.env.NODE_ENV, "production"); //判断是否是生产环境

// authedAxios.defaults.baseURL = process.env.VUE_APP_BASE_URL
authedAxios.defaults.baseURL = isPro ? process.env.VUE_APP_BASE_URL : "/api"; //如果是生产环境，则使用接口地址，否则使用代理地址

Express 中解决跨域问题

  • 在 api 设置中写入：
1
2
3
4
5
6
7
8
9
// app.js

app.all("*", function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "*");
  res.header("Content-Type", "application/json;charset=utf-8");
  res.header("Access-Control-Allow-Methods", "PUT, POST, GET, DELETE, OPTIONS");
  next();
});
  • 安装插件 cors

引入插件：

1
2
3
4
5
6
// app.js

// 引入跨域插件
const cors = require("cors");
// 解决跨域
app.use(cors());