- 由后端实现跨域
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
- 由前端实现跨域,后端不做任何设置。
在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