Vue项目中怎么解决跨域问题

本篇内容主要讲解“Vue项目中怎么解决跨域问题”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“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+端口，三个必须完全相同称之为同源，不同源的称之为跨域注意：同源策略不是服务器行为，而是浏览器的行为，服务器会正常响应请求，但是如果不同源会被浏览器拦截搭建一个express服务器用来演示跨域报错安装expressapp.jsviews/index.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发送请求报错，因为浏览器地址栏访问的服务器是ht免费云主机域名tp://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项目，安装axios模块main.jsviews/About.js脚手架项目端口是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：修改后需要重启脚手架项目views/About.js原理：跨域是浏览器的安全策略，服务器和服务器之间发送请求没有跨域在启动脚手架的时候会启动一个内置node服务器请求的时候浏览器实际并没有直接和需要请求的服务器通信，而是通过内置的node服务器在中转注意：项目上线需要把打包后的文件放在服务器上运行，而不是启动脚手架运行，也就没有内置node服务器做代理，所以此方式只适用于开发测试阶段上线时需要使用nginx代理或者服务器配置cors(每种语言有自己不同的配置方式)express中处理跨域需要使用cors模块app.js到此，相信大家对“Vue项目中怎么解决跨域问题”有了更深的了解，不妨来实际操作一番吧！这里是百云主机网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: npm node gyp失败如何解决

这篇文章主要介绍了npm node gyp失败如何解决的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇npm node gyp失败如何解决文章都会有所收获，下面我们一起来看看吧。 npm node gyp失败是因为“node-gyp…