- 由后端实现跨域
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:
而且这里比较坑的一个地方呢，就是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