解决vue项目中的前端跨域问题

什么是跨域

正常情况下，我们使用ajax请求的数据都在自己的服务器上。但在一些特定的场景中，我们需要获取到别人的服务器上的数据，也就是在自己的服务器中的ajax要请求到别人的服务器的网址，这就是跨域。跨域是浏览器为了安全而做出的策略—》同源策略

同域策略：

即同端口，同域名，同协议

那么如何解决呢，小编整理了三个方案

1. 方案一：cors解决跨域

服务端：设置以下参数,表示允许访问

Access-Control-Allow-Origin：*
//*代表允许所有的域名访问，写www.fyc.com的话就是只允许来自该域名的跨域请求
Access-Control-Allow-Credentials: true
//CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器，一方面要服务器同意，指定Access-Control-Allow-Credentials字段。

2. 方案二：jsonp解决跨域

下载jsonp插件

npm i jsonp --save

引入

import jsonp from "jsonp"

使用jsonp解决跨域

// 语法:
// jsonp(url,callback)  url 请求地址  callback回调函数 两个参数，(err,res) err错误信息，res 返回值 其他用法请去npm

3. 方案三：代理跨域

在vue项目中，与package.json同级创建vue.config.js的入口文件名字必须是vue.config.js 这是vue-cli在webpack搭建时留的文件入口
vue.config.js配置如下

module.exports={devServer:{port:"9999", // 设置端口 默认8080open:true, // 项目运行自动打开浏览器 偷懒一波// 在与port open 设置服务代理proxy:{// /api 自定义服务代理名字"/api":{target:"http://localhost:3737", //代理帮助你请求的具体服务changeOrign:true, // 开启代理pathRewrite:{  // 格式化path "^/api":""}}}}
}

请求设置：把请求地址中的服务http://licalhost:3737改为/api (在代理服务配置中自己定义的服务代理名)

 this.axios({url:"/api/user/one",method:"get"}).then((res)=>{console.log(res)})

注意：如果服务代理不设置格式化path会访问不到，报错，因为最终访问的地址是http://localhost:3737/api/user/one 所以需要格式化path，把请求地址中的/api设置为空，如果一样可以忽略

解决vue项目中的前端跨域问题相关推荐

vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...
vue php axios 跨域,在vue项目中,使用axios跨域处理
下面我就为大家分享一篇在vue项目中,使用axios跨域处理,具有很好的参考价值,希望对大家有所帮助. 跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无 ...
ssm把图片保存到项目中_项目中的图片跨域问题解决方式
现象首先,在生产环境中,由于进行编辑图片时,将图片回显到ReactCrop组件中进行可裁剪编辑,然而回显时,需要将图片转化为base64的格式或者blob对象, 此时需要将图片次绘制成canvas进 ...
vue项目打包部署nginx跨域
vue项目打包部署nginx跨域 vue项目连接外部api接口时,打包部署到nginx后出现api404,api跨域问题,这个时候需要给vue项目本身进行跨域,再配置nginx中进行跨域即可解决,详见 ...
解决vue项目中prettier、eslint格式冲突问题
解决vue项目中prettier.eslint格式冲突问题我是用prettier作为vscode默认的格式化插件的,vue项目自动保存的时候,格式化,会自动在代码末尾添加分号,单引号会自动变成双引号 ...
springboot+Vue项目使用axios实现跨域(CROS)
springboot+Vue项目使用axios实现(CROS)跨域一.项目背景二.跨域资源共享 CORS 详解三.axios跨域实现 3.1 安装qs模块 3.2 axios使用四.sprin ...
如何在vue项目中实现前端埋点？埋点用户操作之Vue实现
埋点又称为事件追踪,目的是收集用户行为数据,例如用户点击了什么按钮,浏览了哪些页面,浏览了多长时间.从哪个页面进入的当前页(转化率)等. 刨除node等实现方式,对于前端来说, 保存这些操作或者说记录 ...
解决vue项目中@mousemove 事件子元素触发了父元素事件
在Vue项目中使用@mousemove事件从$event中获取x与y轴时 , 如果绑定此事件的元素内还有别的子元素那么同样会触发mousemove事件 , 但是$event.target会是这个子元素 ...
炒股大赛项目中遇到的跨域情况
代理转发项目是前后端分离,api和node不是部署在同一个域名下,所以前端的server.js就用到了代理转发来解决跨域请求api接口的问题. // server.jsconst proxy = r ...