axios跨域携带cookie_axios 跨域处理以及带 cookies 的请求

背景

在开发 vue 的项目时，使用 axios 来与后端交互，经常会遇到几个问题

请求跨域

请求中带 cookies

请求跨域解决方案

解决请求跨域有以下两种方案

同源访问

后端允许跨域请求

这里主要针对非同源情况做介绍，解决请求跨域需要后端配合处理，下面直接看代码，这里的 demo 中，前端运行在 localhost:1234，后端运行在 localhost:3000，不满足同源协议

axios发起请求

import axios from 'axios'

(async function () {

try {

let {data} = await axios.get('//localhost:3000')

console.log(data)

} catch (e) {

console.warn(e)

}

})()

在后端不做处理时，页面会报错

QQ20180530-233625@2x.png

后端只需要按照提示设置响应头就可以了

res.header("Access-Control-Allow-Origin", "*")

这时候前端已经可以做跨域请求了，不过一般这种情况尽量仅在测试环境使用，项目上线后通常就会同源访问了，如果仍为非同源，只需将 * 号修改为对应域名即可

请求中带 cookies

日常开发中，有些接口可能需要前端请求的时候携带 cookies 来做身份判断等操作，而 axios 请求默认是不带 cookies 的，这时需要前端与后端同时做一些调整

前端调整

// 对所有 axios 请求做处理

axios.defaults.withCredentials = true;

// 对单独的 axios 请求做处理

let {data} = await axios.get('//localhost:3000', {

withCredentials: true

})

此时前端请求已经可以正常携带 cookies 了，而且可以正常发出请求甚至得到数据，而请求仍然抛出了一个 error，导致即使可以从 network 中看到数据，仍然没法进行进一步的使用

QQ20180530-234749@2x.png

此时需要后端做一些调整，具体操作参照报错信息即可，根据当前 demo 的情况，后端可对响应头做如下调整

// res.header("Access-Control-Allow-Origin", "*")

res.header("Access-Control-Allow-Origin", "http://localhost:1234")

res.header("Access-Control-Allow-Credentials", true)

此时前端即可做跨域访问的同时，携带 cookies 了，如不涉及跨域情况，则去掉对于 origin 的设置即可

axios跨域携带cookie_axios 跨域处理以及带 cookies 的请求相关推荐

axios跨域携带cookie_axios中cookie跨域及相关配置示例详解
前言最近在跨域.cookie 以及表单上传这几个方面遇到了点小问题,做个简单探究和总结.本文主要介绍了关于axios中cookie跨域及相关配置的相关内容,下面话不多说了,来一起看看详细的介绍吧. ...
CORS 请求未能成功_当遇到跨域开发时, 我们如何处理好前后端配置和请求库封装(koa/axios版)...
我们知道很多大型项目都或多或少的采用跨域的模式开发, 以达到服务和资源的解耦和高效利用. 在大前端盛行的今天更为如此, 前端工程师可以通过nodejs或者Nginx轻松搭建起web服务器.这个时候我们 ...
CORS跨域携带Cookie
遇到的问题: 某个老系统使用Vue+Axios+PHP开发,本身是部署在同一域名下这时候不会涉及到跨域问题但是奈何线上服务器带宽不够用,且JS.CSS.图片等静态资源加载很缓慢只能把静态资源迁移 ...
前端跨域携带cookie
文章目录前言一.withCredentials 二.前端axios跨域携带cookie请求示例三.后端nodejs设置示例运行结果总结前言在一些场景下,前端需要跨域携带cookie传输给 ...
全局配置axios、axios 拦截器和 proxy 跨域代理
目录一.全局配置axios 1. 为什么要全局配置 axios 2. 如何全局配置 axios 3. 在 vue3 的项目中全局配置axios 4. 在 vue2 的项目中全局配置 axios ...
axios简单配置及解决跨域
const instance = axios.create({baseURL: 'https://some-domain.com/api/',timeout: 1000,headers: {'X-Cu ...
axios 重定向问题解决_axios 解决跨域问题
二.例子 1. 发送一个GET请求 //通过给定的ID来发送请求 axios.get('/user?ID=12345') .then(function(response){ console.log(r ...
form表单会跨域_前端跨域So Easy
跨域本文主要介绍JSONP.CORS两种跨域方式,后台采用Koa模拟,真正的目标是理解整个跨域的流程.至于什么是跨域和浏览器同源策略的问题,请同学们自行百度. JSONP JSONP 其实是一种tr ...
php跨域资源共享,CORS 跨域资源共享
CORS (Cross-Origin Resource Sharing) 跨域资源共享为什么需要 CORS 首先,跨域指的是同一个域名下的资源,同时要注意域名与子域名,比如 developers.e ...

axios跨域携带cookie_axios 跨域处理以及带 cookies 的请求

axios跨域携带cookie_axios 跨域处理以及带 cookies 的请求相关推荐

最新文章

热门文章