您的位置：首页 > 编程技术 > js  >  Vue项目中该如何解决跨域问题

Vue项目中该如何解决跨域问题

 更新时间：2022年6月10日 10:31  点击：789 作者：有怪兽

跨域

跨域报错是前端开发中非常经典的一个错误，报错如下

 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+端口，三个必须完全相同称之为同源，不同源的称之为跨域

URLURL对比
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跨域问题内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

原文出处：https://juejin.cn/post/7106821436144091173

[!--infotagslink--]

相关文章

  • vue中activated的用法

    这篇文章主要介绍了vue中activated的用法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下...2021-01-03

  • 基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能

    这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-02-23

  • Antd-vue Table组件添加Click事件,实现点击某行数据教程

    这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17

  • vue 实现动态路由的方法

    这篇文章主要介绍了vue 实现动态路由的方法，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-06

  • vue 监听 Treeselect 选择项的改变操作

    这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01

  • Vue组件跨层级获取组件操作

    这篇文章主要介绍了Vue组件跨层级获取组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28

  • Vue基于localStorage存储信息代码实例

    这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16

  • vue 获取到数据但却渲染不到页面上的解决方法

    这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-11-19

  • antdesign-vue结合sortablejs实现两个table相互拖拽排序功能

    这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-01-09

  • vuejs element table 表格添加行,修改,单独删除行,批量删除行操作

    这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18

  • vue项目多环境配置(.env)的实现

    最常见的多环境配置，就是开发环境配置,和生产环境配置，本文主要介绍了vue项目多环境配置的实现，感兴趣的可以了解一下...2021-07-20

  • vue treeselect获取当前选中项的label实例

    这篇文章主要介绍了vue treeselect获取当前选中项的label实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01

  • vue项目页面嵌入代码块vue-prism-editor的实现

    这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-10-30

  • Vue中slot-scope的深入理解（适合初学者）

    这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解，这个教程非常适合初学者,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-17

  • Vue 3.0中jsx语法的使用

    这篇文章主要介绍了Vue 3.0 中 jsx 语法使用，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下...2020-11-13

  • PHP传值到不同页面的三种常见方式及php和html之间传值问题

    在项目开发中经常见到不同页面之间传值在web工作中，本篇文章给大家列出了三种常见的方式。接触PHP也有几个月了，本文总结一下这段日子中，在编程过程里常用的3种不同页面传值方法，希望可以给大家参考。有什么意见也希望大...2015-11-24

  • 解决vue的router组件component在import时不能使用变量问题

    这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27

  • vue实现同时设置多个倒计时

    这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-05-20

  • js修改input的type属性问题探讨

    js修改input的type属性有些限制。当input元素还未插入文档流之前，是可以修改它的值的，在ie和ff下都没问题。但如果input已经存在于页面，其type属性在ie下就成了只读属性了，不可以修改。...2013-10-19

  • vue Treeselect下拉树只能选择第N级元素实现代码

    这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01