【前后端跨域分析与解决】

目录

前言-前后端跨域问题

一、什么是跨域？

二、前端页面对于跨域问题的解决

1.使用Nginx进行反向代理

 下载Nginx

使用Nginx 

2.使用jsonp越过跨域

三、后端页面对于跨域问题的解决

1.在整个程序入口文件app.js里设置全局属性app.all（）

 2.使用CORS第三方库

总结

---

前言-前后端跨域问题

        提示：对于现今，前后端分离，越来越普遍化，一旦分离，就出现了许多问题，其中就有跨域的问题。以下内容，可供参考，也可以尝试，毕竟问题有可能不止一处。

一、什么是跨域？

简单来说，就是不同源的网址之间进行数据共享互通（请求），这就是跨域，而产生跨域的根本原因是在浏览器上存在一种同源策略，也可以称作安全策略，它的出现就是为了保护本地数据不被JavaScript代码获取回来的数据污染。

而上面所谓的不同源，就是协议（http、https等）、域名（可以是localhost，也可以是mp.csdn.net等）、端口（8081、3000等）存在不同。

总结，但凡出现不同，就有可能会被浏览器的同源策略影响，从而被拦截下来。

二、前端页面对于跨域问题的解决

1.使用Nginx进行反向代理

(oﾟ▽ﾟ)o  :如果不知道nginx是什么，有兴趣的可以点开下面的链接看看，或者去百度搜索资料。

https://baike.baidu.com/item/nginx/3817705?fr=aladdin

---

•  下载Nginx

        方法一：http://nginx.org/en/download.html

        方法二：前往百度，搜索nginx，找到官网或https://nginx.org/

找到download，点击进入下载界面。

总结：选择稳定版（Stable version）即可

 点击nginx/Windows下载下来即可，会下载下来一个压缩包，解压在任意目录下即可。

        方法三：寻找nginx菜鸟教程或者搜索nginx安装教程 ，最后安装好即可

---

• 使用Nginx 

打开解压下来的压缩包文件，找到conf文件夹

打开conf文件夹，找到nginx.conf文件

打开nginx.conf文件进行编辑

找到server{ }，对里面的listen的对应数字进行修改 ，并添加前端与后端两个链接。

代码如下（示例）

listen       8082;
server_name  localhost;

     此处的listen为在网页上访问的统一端口号，至于listen下面的server_name域名，想修改的也可以。下面的两个也是需要添加到其中的，若存在location / ，则更改为下面的两个内容。

        前一个是前端页面启动后，运行在http://localhost:8081上。（ps:前端用的是vue2.0，配置生成的接口文件）

        后一个是后端配置启动后，运行在http://localhost:3000/上，访问的是users的路径,后端文件中的接口总路径，也是后端users文件的文件名,同时也是在app.js中设置的接口。（ps:后端用的是express，配置生成的接口文件）

代码如下（示例）

 location / {
    proxy_pass http://localhost:8081;
  }

 location /users {
    proxy_pass http://localhost:3000;
  }

      总结：配置完上述的内容后，启动前后端，在网页上访问统一路径，后端接口，在网页上会被代理在统一路径下，比如上面的例子：http://localhost:8082（统一链接），前端在页面上显示（http://localhost:8082/#/),后端在Networks上显示(请求的链接显示http://localhost:8082/users） 

2.使用jsonp越过跨域

(oﾟ▽ﾟ)o  ：个人不推荐使用这个方法，但是还是稍微讲解一下。

原理：json数据请求，后端返回一串可执行的JSON数据或者说是JavaScript数据。

通过页面标签的src或者href、link等，进行的引入（-_-,我称它为越级）使用，再通过在引入的文件中书写的回调函数，进行传值，这样的操作下来就可以做到免除不同源的影响。

但是，它的缺点也非常明显，只能进行GET请求，还需要服务端进行数据处理，和配合着些回调函数等。

有详细操作需求的可以看下面的文章：

https://blog.csdn.net/qq_38128179/article/details/84956552

---

三、后端页面对于跨域问题的解决

(oﾟ▽ﾟ)o  ：本人后端使用的基于node.js使用的Express框架。

1.在整个程序入口文件app.js里设置全局属性app.all（）

• app.all(“任意的源或* ”,function(req,res,next){})
• *代表任意，对于需要限制具体内容的，需要进行更深的添加
• 注意：需要在js文件的头部使用（或者在express之后使用），避免路由搭建完成后未进行跨域设置而导致的跨域失败。

比如：Access-Control-Allow-Origin设置允许跨域的域名，用if语句判断req.headers.origin的值，从而限制请求

比如：Access-Control-Allow-Headers设置允许的header类型

比如：Access-Control-Allow-Methods设置跨域允许的请求方式

代码如，示例 ↓

/设置跨域访问  
app.all('*', function(req, res, next) {  
  res.header("Access-Control-Allow-Origin", "*");  
  res.header("Access-Control-Allow-Headers", "*");  
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  
  res.header("X-Powered-By",' 3.2.1')  
  res.header("Content-Type", "application/json;charset=utf-8");  
  next();  //将上面的参数返回出去，并向下执行
});  

 2.使用CORS第三方库

(oﾟ▽ﾟ)o  ：CORS是 Express 的一个第三方中间件。通过安装和配置 cors 中间件，可以很方便地解决跨域问题。

      

使用步骤分为如下 3 步：

        ①运行 npm install cors 安装中间件

        ②使用 const cors = require('cors') 导入中间件

        ③在路由之前调用 app.use(cors({origin:”*”})) 配置中间件

  注意：在app.js的文件如同使用app.all全局配置一样，但是一样的需要在使用程序的头部添加，避免路由编译完成后才去配置解除跨域的方法，而导致的跨域失败 

总结

本篇文章，主要针对跨域问题，进行了前后端测试，目前测试良好，有问题的码友，可以私聊我，相互讨论，共同进步。最后各位码友，觉得好的可以点赞，关注，收藏(^_^)