一、跨域固定报错格式
只要出现跨域问题,浏览器就会出现一个固定格式的报错信息
Access to XMLHttpRequest at '服务器url地址' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
二、为什么会报跨域?
不满足同源策略:协议+域名+端口 是浏览器为了保护接口的一个安全策略,不让访问
-
同源的定义: 两个url地址的
协议
与主机
与端口
均一致协议:http ,https 主机:域名或者ip地址(127.0.01) 端口:3000,4399
不同源的定义: 两个url地址,
协议 主机 端口
任何一个不一致 2.什么是跨域?
-
[浏览器使用
ajax
时,如果请求的接口地址
和 当前打开的页面
地址不同源
称之为跨域]- (1) ajax:浏览器只有使用ajax发送请求才会出现跨域。 href属性与src属性不会出现跨域-
- (2)接口地址:ajax请求的url
- (3)打开的页面:当前页面的window.location.href
- (4)不同源 : 浏览器使用ajax,向不同源的接口发送请求,称之为 跨域访问
三、如何解决跨域?
在vue项目中,主要针对CORS
或Proxy
这两种方案展开
1.第一种:CORS 【后端】
- 目前最主流、最简单的方案,直接让后端设置响应头,允许资源共享就ok了
//调用方法创建一个服务器
const app = express()
//解析json格式的请求体
app.use(express.json())
//解析查询字符串格式的情趣
app.use(exoress.urlencoded({extended:true}))
//第一种: 使用中间件函数来设置cors允许资源共享
app.use((req.res.next)=>{
//设置响应头 告诉浏览器任何地址都可以访问这个接口
res.setHeader('Access-Cosntrol-Allow-Origin','*')
//告诉浏览器支持这些方式
res.setHeader('Access-Cosntrol-Allow-Methods','GET,POST,DELETE,PUT')
next()
})
//第二种 推荐使用插件
const cors = require('cors')
app.use(cors())
设置成功之后显示
2.第二种:JSONP 【前端+后端】
- 曾经很流行,专治各种跨域问题
- 需要前后端配合使用
- 使用原理:通过script标签的src来发请求没有跨域限制来获取资源
- 注意:JSONP只支持get请求,不支持post,请求回来的东西当做js来执行
3.第三种:Nginx 【后端=>反向代理】
4.第四种:Proxy 【前端解决:只适用于本地开发环境,上线了解决不了,直接把dist放在后端服务器中】
-
产生了跨域:
- 请求发了,【浏览器拦截了】
- 服务器和服务器发请求 不存在跨域
- 项目启动让服务器请求
vue-cli脚手架工具搭建项目
在vue.config.js
配置文件中
module.exports = {
devServer: {
// 代理配置
proxy: {
// 如果请求地址以/api打头,就出触发代理机制
'/api': {
target: 'http://localhost:3000' // 要代理的真实接口地址
// http://localhost:9588/api/login -> http://localhost:3000/api/login
}
}
}
}
}
通过axios发请求配置根路径
axios.defaults.baseURL='/api'
修改配置之后,一定要重启前端项目,跨域解决
特别强调:
ajax的基地址baseUrl必须是相对地址,而不能是绝对地址