目录
1.在整个程序入口文件app.js里设置全局属性app.all()
前言-前后端跨域问题
提示:对于现今,前后端分离,越来越普遍化,一旦分离,就出现了许多问题,其中就有跨域的问题。以下内容,可供参考,也可以尝试,毕竟问题有可能不止一处。
一、什么是跨域?
简单来说,就是不同源的网址之间进行数据共享互通(请求),这就是跨域,而产生跨域的根本原因是在浏览器上存在一种同源策略,也可以称作安全策略,它的出现就是为了保护本地数据不被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全局配置一样,但是一样的需要在使用程序的头部添加,避免路由编译完成后才去配置解除跨域的方法,而导致的跨域失败
总结
本篇文章,主要针对跨域问题,进行了前后端测试,目前测试良好,有问题的码友,可以私聊我,相互讨论,共同进步。最后各位码友,觉得好的可以点赞,关注,收藏(^_^)