继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

关于web网页开发中前后端分离的跨域问题

东方既白233
关注TA
已关注
手记 44
粉丝 38
获赞 153
  1. 由后端实现跨域
    1.1 如果不是附带cookie 在请求头请求的话,那么后端可以这样设置。

header(“Access-Control-Allow-Origin:");
header(“Access-Control-Allow-Methods: POST,GET”);

1.2 如果是附带cookie 在请求头请求的话,那么ajax请求方面 我用的是axios 那么就要在请求设置 withCredentials: true,jquery也是一样。
附带axios例子,这里写的是axios的一个构造函数

但是在这里就不能使用 header("Access-Control-Allow-Origin:
”); 这里就应该修改成你本地调试的域名了。 例如我用的是本地服务器8080端口那么就后端要设置成header(“Access-Control-Allow-Origin:http://localhost:8080”); 以及后端要添加头部 header(“Access-Control-Allow-Credentials:true”);

而且这里比较坑的一个地方呢,就是cookie也有同源跟跨域的问题,由于本地前端自己设置的cookie的domain是localhost的,那么请求服务端的时候,如果domian的域名跟请求域名不是同源,那么是无法携带在请求头的信息的,所以这里只能使用浏览器插件去修改domain的域名,或者自己手动去修改domain的域名, 比如我想请求https://github.com 携带cookie 那么我就要把domain修改为github.com,而且不能刷新,刷新之后domain域名就被重置为本地域名了,下面是关于cookie的domain的截图

图片描述

浏览器客户端与服务端的请求头 cookie的携带,必须是同源的,否则也是不能携带在请求里面
下面是在MDN看到的文章引用

MDN :

对于附带身份凭证的请求,服务器不得设置 Access-Control-Allow-Origin 的值为 *。

这是因为请求的首部中携带了 Cookie 信息,如果 Access-Control-Allow-Origin 的值为 *,请求将会失败。

而将 Access-Control-Allow-Origin 的值设置为 http://xxx.xxx,则请求将成功执行。

MDN:
Access-Control-Allow-Credentials 头指定了当浏览器的credentials设置为true时是否允许浏览器读取response的内容。当用在对preflight预检测请求的响* > 应中时,它指定了实际的请求是否可以使用credentials

  1. 由前端实现跨域,后端不做任何设置。
    在webpack中使用代理转发 目录-fonfig 文件-index.js

该index.js文件设置

dev: {
env: require(’./dev.env’),
port: process.env.PORT || 8080,
autoOpenBrowser: true,
assetsSubDirectory: ‘static’,
assetsPublicPath: ‘/’,
proxyTable: {
’/ctx/api’: {
target: “http://www.xxx.xx”,
changeOrigin: true
}
},
cssSourceMap: false
}
这里是vue-cli脚手架 webpack的目录以及配置

/ctx/api 使用了正则匹配,只要在请求中 请求路径是/ctx/api 开头的 都会使用代理 到 http://www.xxx.xx 就相当于是你用这个域名发送请求了,跟你要请求的网址同源了,也就不会出现跨域问题了。

下面我对/ctx/api/${id} 进行请求,那么就会被webpack代理转发 相当于不是从本地发送请求,而是从 http://www.xxx.xx 发送请求,这样相当于发送请求的域名 跟我要请求的域名是同一个了,那么就是同源,就不存在跨域问题了。

那么以上cookie发送,后端也都不用设置任何header了,前端也不用设置cookie跨域携带,以及cookie不用去修改domian,因为已经是同源了。其实综上比计较,跨域如果不涉及cookie,那么跨域的好处会比较多,前端也可以随时部署自己的代码在自己的服务器上,不受后端的限制,只要服务端正常跑就可以了,如果是涉及cookie的话,那么还是使用代理转发比较容易,但是这样子每次代码的更新,就要去麻烦后端上传代码在同一台服务器下了

如果是使用前端跨域,在打包部署时候,因为同源策略 需要前后端代码文件放在同一个服务器上。
如果是使用后端跨域,那么在打包部署时候,因为后端设置了跨域http头部,那么前后端文件放在不同服务器也能正常请求。
代理跨域 还有别的方式,如nginx反向代理以及node代理等等,有兴趣的小伙伴可以去了解一下。这两样都还没尝试过,等玩过再来更新。

由于本人能力跟见识有限,如果有哪里说的不对或者用词不准的地方,欢迎在issue 中给我提出~

thanks 小白以及kuohao 的tips

打开App,阅读手记
3人推荐
发表评论
随时随地看视频慕课网APP