Vue项目中该如何解决跨域问题
跨域
跨域报错是前端开发中非常经典的一个错误，报错如下
Access to XMLHttpRequest at '......' from origin
'......' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
跨域错误源自于浏览器的同源策略，想要解决跨域首先要知道什么是同源策略
同源策略
同源策略：著名的安全策略，URL有三个基本组成部分：协议+域名或ip+端口，三个必须完全相同称之为同源，不同源的称之为跨域
| URL | URL | 对比 |
|---|---|---|
| http://localhost:3000/ | https://localhost:3000/ | 不同源：协议不同 |
| http://localhost:3000/ | http://127.0.0.1:3000/ | 不同源：域名或ip不同 |
| http://localhost:3000/ | http://localhost:3001/ | 不同源：端口不同 |
| http://localhost:3000/ | http://localhost:3000/ | 同源 |
| http://127.0.0.1:3000/ | http://127.0.0.1:3000/ | 同源 |
注意：同源策略不是服务器行为，而是浏览器的行为，服务器会正常响应请求，但是如果不同源会被浏览器拦截
express服务器
搭建一个express服务器用来演示跨域报错
安装express
npm i express
app.js
let express = require('express')
let app = express()
app.listen(3000, () => {
console.log('服务器已启动...')
})
app.use(express.static('./views'))
app.get('/getTest', (req, res) => {
console.log(req.query)
res.send(req.query)
})views/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
function getIpTest() {
axios({
method: "get",
url: "http://127.0.0.1:3000/getTest",
params: { uid: 123 },
}).then((res) => {
console.log(res.data);
});
}
function getDnameTest() {
axios({
method: "get",
url: "http://localhost:3000/getTest",
params: { uid: 123 },
}).then((res) => {
console.log(res.data);
});
}
</script>
</head>
<body>
<button onclick="getIpTest()">getIpTest</button>
<button onclick="getDnameTest()">getDnameTest</button>
</body>
</html>打开浏览器访问http://127.0.0.1:3000/
调用getIpTest发送请求不会报错，因为浏览器地址栏访问的服务器是http://127.0.0.1:3000/ ，而方法内发送请求的URL也是http://127.0.0.1:3000/ ，视为同源
调用getDnameTest发送请求报错，因为浏览器地址栏访问的服务器是http://127.0.0.1:3000/ ，而方法内发送请求的URL也是http://localhost:3000/ ，视为跨域
Access to XMLHttpRequest at 'http://localhost:3000/......' from origin
'http://127.0.0.1:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
打开浏览器访问http://localhost:3000/
调用getDnameTest发送请求不会报错，因为浏览器地址栏访问的服务器是http://localhost:3000/ ，而方法内发送请求的URL也是http://localhost:3000/ ，视为同源
调用getIpTest发送请求报错，因为浏览器地址栏访问的服务器是http://localhost:3000/ ，而方法内发送请求的URL也是http://127.0.0.1:3000/ ，视为跨域
Access to XMLHttpRequest at 'http://127.0.0.1:3000/......' from origin
'http://localhost:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
vue处理跨域
创建vue项目，安装axios模块
vue create app
npm install axios vue-axios
main.js
import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios)
views/About.js
<template>
<div class="about">
<button @click="getTest()">getTest</button>
</div>
</template>
<script>
export default {
methods: {
getTest() {
this.axios({
method: "get",
url: "http://127.0.0.1:3000/getTest",
params: { uid: 123 },
}).then((res) => {
console.log(res.data);
});
},
},
};
</script>脚手架项目端口是8080而请求的express服务器端口是3000，不满足同源策略，发送请求报跨域错误
Access to XMLHttpRequest at 'http://127.0.0.1:3000/......' from origin
'http://127.0.0.1:8080' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
解决办法： 配置代理服务器
vue.config.js：修改后需要重启脚手架项目
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
//配置http-proxy代理方式跨域
proxy: {
// 自定义请求的开头,使用代理方式处理/demo开头的请求,/xxx可以自定义
"/demo": {
// 往哪个服务器发请求
target: "http://127.0.0.1:3000",
pathRewrite: {
// ^代表字符串开头,实际发送请求时,会把请求开头的/demo删除
// 因为/demo并不是请求的一部分,只是个代理的标识
"^/demo": "",
},
},
// 如果有其他网址也需要跨域则继续配置
// "/其他的...": {
// target: "其他的请求地址",
// pathRewrite: {
// "^/其他的...": "",
// },
// },
},
},
})views/About.js
<template>
<div class="about">
<button @click="getTest()">getTest</button>
</div>
</template>
<script>
export default {
methods: {
getTest() {
this.axios({
method: "get",
// 在原来的url上去掉http://127.0.0.1:3000换成/demo
url: "/demo/getTest",
params: { uid: 123 },
}).then((res) => {
console.log(res.data);
});
},
},
};
</script>原理：
跨域是浏览器的安全策略，服务器和服务器之间发送请求没有跨域
在启动脚手架的时候会启动一个内置node服务器
请求的时候浏览器实际并没有直接和需要请求的服务器通信，而是通过内置的node服务器在中转
注意：
项目上线需要把打包后的文件放在服务器上运行，而不是启动脚手架运行，也就没有内置node服务器做代理，所以此方式只适用于开发测试阶段
上线时需要使用nginx代理或者服务器配置cors(每种语言有自己不同的配置方式)
express处理跨域
express中处理跨域需要使用cors模块
npm i cors
app.js
let express = require('express')
// 引入cors模块
var cors = require("cors");
let app = express()
app.listen(3000, () => {
console.log('服务器已启动...')
})
// 配置跨域
app.use(cors({
// 允许跨域的服务器地址,可以写多个
origin: ['http://localhost:3000', 'http://127.0.0.1:3000'],
// 使用cookie时需要设置为true
credentials: true
}));
app.use(express.static('./views'))
app.get('/getTest', (req, res) => {
console.log(req.query)
res.send(req.query)
})总结
到此这篇关于Vue项目中该如何解决跨域问题的文章就介绍到这了,更多相关Vue跨域问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue从使用到源码实现的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
这篇文章主要介绍了10分钟上手vue-cli 3.0 入门介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了vue3+ts+Vuex中使用websocket协议方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue2升级vue3遇到的问题bug解决分析整理,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
在本篇文章里小编给大家整理的是关于vue的keep-alive用法技巧以及实例代码，需要的朋友们学习下。2019-08-08
这篇文章主要介绍了稍微学一下 Vue 的数据响应式（Vue2 及 Vue3），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要为大家详细介绍了vue路由传参的3种基本模式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-02-02
这篇文章主要给大家介绍了关于如何使用vuex实现兄弟组件通信的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
ref和reactive是Vue3中用来实现数据响应式的API,一般情况下,ref定义基本数据类型,reactive定义引用数据类型,本文给大家介绍Vue3 的ref和reactive的用法和区别,感兴趣的朋友一起看看吧2023-10-10
本篇文章主要介绍了Nuxt.js踩坑总结分享，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
最新评论