【vue axios 跨域】cookie、origin等一步步递进的跨域踩坑已解决

前后端对接必出bug，最近连续对接了两个项目，对解决跨域有点感觉了，跟大家分享一下经验，都是血的教训…

两个项目都是Springboot+Vue（axios网络请求）。本人主要负责前端，所以前端会分享具体的代码，后端就大致分享一下相应的解决思路。（如果你是后端，应该都懂；如果你是前端，就把思路告诉你的后端，他应该都懂~）

第一个坑：No ‘Access-Control-Allow-Origin’ header

首先，最初也是最常见的情况。在浏览器直接输入网址可以访问到后端，但是前端无法请求到。跨域报错信息：No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

后端解决方案：这一步前端还不需要做啥，后端在响应头中把“Access-Control-Allow-Origin”设置为“*”，这是大家最熟悉的解决方案了。

第二个坑：登录前的页面一切正常，登录后的页面，也就是需要携带cookie请求的页面，就会出现401报错，即用户没有访问权限，需要进行身份认证，说白了就是没有携带cookie请求后端。

前端解决方案：这是axios的坑，axios发送请求默认不携带cookie，需要前端设置一下。这个是全局配置的axios，每次请求的时候配置也行，但全局更方便一点。

axios.defaults.withCredentials = true;

后端解决方案：

同时，后端也需要配合修改，因为前端设置了withCredentials为true，后端的’Access-Control-Allow-Origin’不允许再使用通配符“*”（根据报错的字面意思），否则又会出现跨域问题。跨域报错信息：The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’.

这时后端应当设置仅允许前端访问，即把“Access-Control-Allow-Origin”设置为前端的ip:port，同时在响应头中把allowCredentials设置为true。我的一位后端是按照下图这样通过注解上搞定的，应该也可以在某个位置全局配置，总之交给后端了！

第三个坑：前端接收到后端的响应头中有Set-Cookie，但就是没有写入浏览器的cookie中，所以还是无法请求到需要携带cookie的页面。

此时的跨域报错信息：The ‘Access-Control-Allow-Origin’ header has a value that is not equal to the supplied origin. 而且如果前后端运行在同一台电脑上就没有这个问题，如果不在同一台电脑上，比如后端在服务器上，前端在本地，就有这个问题。

前端解决方案：配置代理。

首先给axios全局配置每次请求都会带的前缀，一般这里是设置后端的ip:port，但是为了配置后面的代理，这里就先随便写一个。

axios.defaults.baseURL = '/api'

接着在项目根目录下的vue.config.js文件（如果没有就自己创建一个）中进行代理配置。注意，vue项目修改配置文件后需要重启项目才能生效。

module.exports = {devServer: {host: 'localhost',  //前端ip，本地就是localhost或者127.0.0.1port: 8081,  //前端port//配置代理proxy: {'/api': {  //刚刚给axios.defaults.baseURL配置的target: 'http://172.19.240.201:8080',  //后端ip:portchangeOrigin: true,  //解决跨域ws: true,pathRewrite: {'^/api': '/'}}}}
}

然后一切都好啦~

【vue axios 跨域】cookie、origin等一步步递进的跨域踩坑已解决相关推荐

Vue 插槽（slot）详细介绍（对比版本变化，避免踩坑）
目录前言正文插槽是什么? 怎么使用插槽? 基本用法后备(默认)内容具名插槽作用域插槽插槽版本变化总结前言 Vue中的插槽(slot)在项目中用的也是比较多的,今天就来介绍一下插槽的基 ...
Vue.js 3 ssr 中报错Hydration node mismatch: - Client vnode: div - Server rendered DOM:已解决
使用nuxt框架+ element + vue3 出现该问题解决方案该问题其实是由于在开发阶段本地服务器的代码与浏览器的代码不一致导致的问题,可以执行一次build命令,可以解决该问题,实际到部署 ...
Vue 中使用 axios 传输数据，当数据量过大时会提示跨域？（√已解决）
环境 – 前端:Vue-cli 4.3.1 后端:Apache || Nginx+Thinkphp5 今天打算用写一个Markdown编辑器给博客用,然后需要将Markdown原文和解析好的HTML提 ...
axios请求mysql_接收post请求（vue+axios）解决跨域问题（三）
1.通过postman测试post请求新建一个接收post的路由 //根据post的id查询 var selId='select * from list where id=?' //响应post r ...
[vue] axios是什么？怎样使用它？怎么解决跨域的问题？
[vue] axios是什么?怎样使用它?怎么解决跨域的问题? axios 的是一种异步请求,用法和ajax类似,安装npm install axios --save 即可使用,请求中包括get,po ...
解决vue axios跨域请求发送两次问题
解决vue axios跨域请求发送两次问题参考文章: (1)解决vue axios跨域请求发送两次问题 (2)https://www.cnblogs.com/wordblog/p/12171875. ...
uni-app vue axios跨域访问问题
uni-app vue axios跨域访问问题为了解决这个axios跨域访问报错问题,查了很多资料,最终还是解决了,特此在这里记录下方法. main.js import axios from 'st ...
java跨域cookie共享_cookie跨域共享 - qijian0503的个人空间 - OSCHINA - 中文开源技术交流社区...
问题描述需要解决前端pc跟服务端(java),跨域后都能获取到同一个cookie. 使用二级域名共享cookie有一个限制条件,就是两个域名的二级域名必须相同前端pc访问域名:a.b.com 后端 ...
前端cookie 放到请求头_ajax请求携带cookie和自定义请求头header（跨域和同域）
错误: 1.ajax请求时是不会自动带上cookie的,要是想让他带上的话,必须设置withCredential为true. 正确: 1.ajax同域请求下,ajax会自动带上同源的cookie: 2 ...

【vue axios 跨域】cookie、origin等一步步递进的跨域踩坑已解决

【vue axios 跨域】cookie、origin等一步步递进的跨域踩坑已解决相关推荐

最新文章

热门文章

【vue axios 跨域】cookie、origin等一步步递进的跨域踩坑 已解决

【vue axios 跨域】cookie、origin等一步步递进的跨域踩坑 已解决相关推荐

最新文章

热门文章

【vue axios 跨域】cookie、origin等一步步递进的跨域踩坑已解决

【vue axios 跨域】cookie、origin等一步步递进的跨域踩坑已解决相关推荐