axios跨域问题

最新推荐文章于 2024-08-19 17:40:00 发布

乔木木木木

最新推荐文章于 2024-08-19 17:40:00 发布

阅读量377

点赞数

分类专栏：笔记文章标签： vue ajax 网络

本文链接：https://blog.csdn.net/qq_43005779/article/details/106951712

版权

本文介绍了axios在遇到跨域问题时的三种解决方法：1. 使用CORS，详细讲解了前端和后端的配置；2. 利用JSONP绕过同源策略；3. 设置前端代理，通过修改package.json中的proxy字段实现。

摘要由CSDN通过智能技术生成

axios的跨域问题

一、什么是跨域问题

要在www.a.com的域下访问www.b.com域下的资源，出于安全考虑不能这样访问，因为比如说html中的<iframe>标签中访问银行的页面，用户在登录我的页面后会以为这是银行界面，然后输入账号密码，但是这样会导致我也可以从我自己的页面拿到这个用户的账号密码，然后我就进去吃牢饭了，所以要拦截这种访问，当真的要进行这种访问时要单独进行配置

二、解决方法1，CORS

本机的配置情况：

静态资源服务器：http://localhost:8081

Api资源服务器：http://localhost:8080

使用的vueCLI4

前端request.js配置

import axios from 'axios'

export function request(config){
	//创建axios的实例
		const instance =axios.create({
		//设置要跨域访问的服务器地址
			baseURL:'http://127.0.0.1:8080',
			timeout:5000
		})
		instance.interceptors.request.use(res=>{
			//发送成功，把配置拦截下来
			console.log(res)
			//把配置信息还回去
			return res
		},err=>{
			//没有发送出去，比如网络有问题的时候
			cons