关于前端:开发中遇到跨域我选择这么做

46次阅读

共计 2786 个字符，预计需要花费 7 分钟才能阅读完成。

Dear，大家好，我是“前端小鑫同学”，😇长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～

讲一下我为啥要写：

跨域说的很多遍，看了很多文章，但总是用的时候就遗记怎么配置了，翻了好几篇文章，配置改了一遍又一遍还是发不进来申请，why？
其实你搜到的文章外面的配置大都是正确的，要害就是有些配置并没有了解，没有适宜本人的我的项目，又自觉的不晓得怎么改就去搜下一篇。

开发中跨域我这么做

在线上环境的跨域能够妥妥的交给运维，服务端，开发时如果遇到须要跨域那咱们怎么做呢？我个别是通过配置 Nginx 来跟服务端做调试，因为开发的共事多了当前你总是把常常变的 proxy 的配置提交到 Git 下面我是不太喜爱的。其它的一些跨域文章如：jsonp，img，浏览器配置变量，改服务端配置等，你感觉不便你能够试试。😏我只用 Nginx，真香！。

具体思路是这样的

先要说一些同源策略，同源策略是一个浏览器内的重要安全策略，限度非同源的脚本穿插拜访。所谓的同源指的就是 URL 的三个次要局部：协定、域名 /IP，端口。只有当这三者全副雷同时即为同源。
当咱们在浏览器拜访咱们做的网站地址时申请了资源服务器并返回了页面元素渲染在里浏览器外面，当咱们的 Web 页面想数据服务器发送申请获取数据时因为两个服务并非同源就会禁止拜访，因为对于咱们开发时来说资源服务就相当于咱们 npm run dev 启动前端我的项目后的服务，须要拜访的数据服务是在服务端同学的电脑上启动的服务。
重点来了，咱们如果在浏览器发送的两种申请被一个中间商代理后，由中间商来向资源服务和数据服务替换信息。那这样在浏览器中不就变成同源了吗？

下图是我画蕴含 Nginx 的繁难数据交换图：

搭建一个环境来演示一下：

构建一个服务端并提供一个 post 接口：

这个绝对简略咱们间接应用 express 来启动一个 3000 端口的服务新增一个 post 路由即可：

const express = require("express");
const app = express();
const port = 3000;

app.get("/", (req, res) => {res.send("Hello World!");
});

app.post("/api/user", (req, res) => {res.send("Got a POST request at /user");
});

app.listen(port, () => {console.log(`Example app listening on port ${port}`);
});

构建一个动态资源服务来发动申请：

  1. 须要一个动态资源服务，咱们应用 static-server 来实现：

    const StaticServer = require('static-server');
const server = new StaticServer({
  rootPath: '.',
  port: 5000,
  templates: {index: 'index.html',}
});
 
server.start(function () {console.log('Server listening to', server.port);
});

  2. 在当前目录创立名为 index.html 的首页，并应用 axios 来发送申请：

    <!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title> 跨域演示 </title>
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
 <button @click="requestAPI"> 发送申请 </button>
 <p>{{content}}</p>
 <script type="module">
     import {createApp} from 'https://unpkg.com/petite-vue?module'
     createApp({
         content: "",
         requestAPI() {
               // nginx 启动后须要将 baseUrl 切换到 nginx 监听的端口
             axios.post('http://10.96.11.99:3000/api/user')
                 .then((response) => {this.content = response.data;})
                 .catch((error) => {console.log('error :>>', error);
                 });
         }
     }).mount()
 </script>
</body>

</html>

    留神：为了没有跨域限度，咱们将 axios 发送申请的 baseURL 删除只保留接口局部，当咱们通过 5001 端口拜访页面后再发送的申请会主动携带 5001 端口的 baseURL。

应用 Nginx 来做数据交换的中间商：

  1. 下载一个适宜本人电脑环境的 Nginx；
  2. 找到 conf/nginx.conf 文件，将外部默认的 server 节点正文掉；

  3. 新增上面的这一片段：

    1. Nginx 作为一个服务软件，咱们监听 5001 端口，也就是启动后咱们能够通过 5001 端口通信；
    2. 通过第一个 location / 配置咱们将要拜访的资源在哪？咱们通过 proxy_pass 将资源指向了前端我的项目启动的 5000 端口，这时候咱们通过 5001 端口就能够看到咱们的前端页面了；

    3. 再通过第二个 location /api 配置能够拦挡到咱们申请中已 /api 开始的资源申请后将通过 proxy_pass 指向服务端我的项目启动的 3000 端口，IP 天然就是服务端同学的 IP。

      server {
  # 启动 Nginx 监听端口
  listen       5001;

  # 将通过 5001 端口拜访路由申请跳转到 proxy_pass 配置
  # proxy_pass：前端动态资源服务
  location /{proxy_pass http://localhost:5000;}

  # 将通过 5001 端口拜访的携带 api 标识的申请跳转到 proxy_pass 配置
  # proxy_pass：服务器接口地址
  location /api{proxy_pass http://10.96.11.99:3000/api;}
}

结尾总结：

不同的场景有不通的解决方案，我只是在开发联调时是这么做的。当你配置完后小概率还有被限度申请的状况，你就要思考是否遇到多 baseURL 的状况，具体要调试的是哪个服务。察看浏览器发送的申请地址有没有被 Nginx 中间商接管。内容均是本人写的，有的概念形容也是本人的了解，有不当的中央还请斧正。😘

欢送关注我的公众号“前端小鑫同学”，原创技术文章第一工夫推送。

正文完
前端
发表至： 前端
2022-04-10
 0
关于前端:按需加载原理分析
关于前端:用-eslint-和-prettier-让跨-IDE-协作更舒服
关于前端:SAP-UI5-sapuicoreutilMockServersimulate-方法介绍
关于前端:如何接地气地接入微前端