Vue项目中跨域问题解决方案

方法

  • 后台更改header
  • 使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建）
  • Jquery jsonp

后台更改header

header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建）

打开config/index.js,在proxyTable中添写如下代码：

proxyTable: {
 '/api': {
  target: '填写请求源地址', //源地址
  changeOrigin: true, //是否跨域
  pathRewrite: {
   '^/api': '' //路径重写
   }
 }
}

使用axios

 this.$axios.post("/api/地址",{
   发送的数据
  }).then(data=>{
   console.log(data);
  })

axios的配置（main.js）

axios.defaults.headers.post["Content-type"]="application/json";
Vue.prototype.$axios=axios;

使用ES6fetch请求

fetch("/api/test/testToken.php",{
   method:"post",
   headers:{
    "Content-type":"application/json",
   },
   body:JSON.stringify({发送数据})
  }).then(result=>{
   return result.json()
  }).then(data=>{
   console.log(data);
  })

使用jquery jsonp

methods: {
 getData () {
  var self = this
  $.ajax({
   url: '地址',
   type: 'GET',
   dataType: 'JSONP',
   success: function (res) {
    self.data = res.data.slice(0, 3)
    self.opencode = res.data[0].opencode.split(',')
   }
  })
 }
}

总结

以上所述是小编给大家介绍的Vue项目中跨域问题解决方案，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 在vue项目中,使用axios跨域处理

    跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无法自己独立的搭建一个服务器,所以就变成了一个尴尬的事情 当然,有很多的虚拟服务器,能够解决跨域问题,他们的实质都是通过后台取与后台沟通,从而委婉的解决跨域问题正好,webpack正有这种功能,所以vue-cli也是有解决跨域的能力 当然,不可能我们直接发送ajax就成功,对吧,我们肯定要修改配置文件 代码: dev: { env: require('./dev.env'), port: 8080, a

  • 详解Vue-cli 创建的项目如何跨域请求

    详解Vue-cli 创建的项目如何跨域请求

    问题描述: 使用 Vue-cli 创建的项目,开发地址是 localhost:8023,需要访问 localhost:9000 上的接口 分析原因: 不同域名之间的访问,需要跨域才能正确请求.跨域的方法很多,通常都需要后台配置 不过 Vue-cli 创建的项目,可以直接利用 Node.js 代理服务器,实现跨域请求 解决方案: 接口地址原本为 /form/save,但是为了匹配代理地址,在前面加一个 /api 如果使用了 axios,可以全局配置一个 baseURL,这样就不用挨个儿修改 url

  • vue2 前后端分离项目ajax跨域session问题解决方法

    最近学习使用vuejs前后端分离,重构一个已有的后台管理系统,遇到了下面这个问题: 实现跨域请求时,每次ajax请求都是新的session,导致无法获取登录信息,所有的请求都被判定为未登陆. 1. vuejs ajax跨域请求 最开始使用的是vue-resource,结果发现vue2推荐的是axios,于是改成axios:安装axios npm install axios -S 安装完成后在main.js中增加一下配置: import axios from 'axios'; axios.defa

  • Vue 项目中遇到的跨域问题及解决方法(后台php)

    Vue 项目中遇到的跨域问题及解决方法(后台php)

    问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The valu

  • 详解vue-cli项目中的proxyTable跨域问题小结

    什么是跨域? 同源策略规定了如果两个 url 的协议.域名.端口中有任何一个不等,就认定它们跨源了. 跨域的解决方式有哪几种? 1.JSONP 是 JSON with padding(填充式 JSON 或参数式 JSON)的简写. JSONP实现跨域请求的原理简单的说,就是动态创建<script>标签,然后利用<script>的src 不受同源策略约束来跨域获取数据. JSONP 由两部分组成:回调函数和数据.回调函数是当响应到来时应该在页面中调用的函数.回调函数的名字一般是在请求

  • vue项目中jsonp跨域获取qq音乐首页推荐问题

    自己利用业余时间,为了更加数据vue和es6的特性,自学着和做了vue的移动端webapp项目.在项目中也是遇到了很多的问题. 接下来,先说一下怎么实现这个需求,然后再说我遇到的问题,以用来纠错. 第一步,再vue项目中引入 jsonp ,并进行 jsonp 的封装. 使用 npm 引入,输入: npm install jsonp --save 安装好之后可以在自己的 package.json 文件中查看是否有此依赖.如下图所示: 如果有红框中显示的内容,说明安装成功,进入下一步封装: impo

  • Vue项目中跨域问题解决方案

    方法 后台更改header 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) Jquery jsonp 后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) 打开config/i

  • 关于SpringBoot与Vue交互跨域问题解决方案

    关于SpringBoot与Vue交互跨域问题解决方案

    目录 浏览器同源策略 一.VUE前端配置代理解决跨域 (1)Vue中让浏览器请求携带cookie (2)vue中配置代理解决跨域 第一步,设置统一访问路径 第二步.配置跨域代理 第三步.测试请求 二.springboot后端配置解决跨域 Hello,你好呀,我是灰小猿,一个超会写bug的程序猿! 浏览器同源策略 为什么会出现跨域问题? 首先一个定义一定要了解,就是浏览器的同源策略, 什么是浏览器的同源策略, 简单来说就是浏览器发送请求的协议.域名和端口要和服务器接收请求的协议.域名以及端口一致.

  • vue项目中常见问题及解决方案(推荐)

    webpack项目中自动引入全局scss变量文件 假设我们有一个公共的scss变量文件variables.scss /*存放所有全局变量*/ $card-title:#C7D200; //首页 卡片标题颜色 $bc-color:#182037; $hoverColor: #7abef9; //链接hover颜色 $fontColor: #E6EFFF; //字体颜色-白色 webpack要识别scss,需要先安装sass的loader npm install --save-dev sass-lo

  • Vue项目开发常见问题和解决方案总结

    Vue Cli 打包之后静态资源路径不对的解决方法 cli2版本: 将 config/index.js 里的 assetsPublicPath 的值改为 './' . build: { ... assetsPublicPath: './', ... } cli3版本: 在根目录下新建 vue.config.js 文件,然后加上以下内容:(如果已经有此文件就直接修改) module.exports = { publicPath: '', // 相对于 HTML 页面(目录相同) } Vue cli

  • laravel开发中跨域的解决方案

    前言 众所周知我们大家在用 laravel 进行开发的时候,特别是前后端完全分离的时候,由于前端项目运行在自己机器的指定端口(也可能是其他人的机器) , 例如 localhost:8000 , 而 laravel 程序又运行在另一个端口,这样就跨域了,而由于浏览器的同源策略,跨域请求是非法的.其实这个问题很好解决,只需要添加一个中间件就可以了.下面话不多说了,来随着小编一起看看详细的解决方案吧. 解决方案: 1.新建一个中间件 php artisan make:middleware Enable

  • Python项目跨域问题解决方案

    1.可以通过settings/dev.py的ALLOWED_HOSTS,设置允许访问 # 设置哪些客户端可以通过地址访问到后端 ALLOWED_HOSTS = [ 'api.luffycity.cn', ] 2.安装跨域模块(一下代码修改都是在settings.dev下进行的) pip install django-cors-headers -i https://pypi.douban.com/simple 添加应用 INSTALLED_APPS = ( ... 'corsheaders', .

  • Vue中跨域及打包部署到nginx跨域设置方法

    众所周知,我们在做前后端分离项目的时候,经常需要在本地起前端工程,接口希望拉取服务端的实际数据而不是本地的mock数据,而如果本地程序直接访问远程接口, 肯定会遇到跨域问题. 什么是跨域?实现跨域的多种方式? 这里我就不详细介绍了,大家自行百度哈 为什么要实现前端跨域 一般来讲,前后端分离的项目在大公司都会由后台设置允许跨域访问,因为后台设置允许跨域是很简单和方便的,但是某些情况下,一些小公司或者你工作的场所后台不怎么配合的情况下,这就需要前端来配置跨域请求来方便我们使用接口 vue项目中的配置

  • 详解vue-cli3 中跨域解决方案

    此方案只能用于开发环境,线上最好设置同源策略(遇到个后端,装你妈批) 前后端不在同一服务器的情况下,前端要访问后端API,可通过在vue.config.js中配置代理服务器. 0:前提条件 1:安装vue-lic 2:安装axios  用于发送请求. 1:将任何未知请求转发到代理服务器 如: 前端地址:127.0.0.1 后端地址:127.0.0.2 当访问地址为 127.0.0.1/api,没有匹配到这地址,那么就会被转发到代理服务器127.0.0.2/api module.exports={

  • Vue项目配置跨域访问和代理proxy设置方式

    在vue单页应用项目开发时,避免不了要请求后端,这时通常就会出现跨域问题.有2种常用的解决方案 后端设置允许跨域访问 前端通过代理进行访问后端 下面我们只说说如何配置vue-cli代理访问: vue-cli代理 最简单就是配置vue conifg进行实现 下面配置3个请求的后端,分别是: 请求http://localhost:4201/adminapi/*会代理请求http://localhost:8180/* 请求http://localhost:4201/portalapi/*会代理请求ht

  • vue项目中常用解决跨域的方法总结(CORS和Proxy)

    目录 一.什么是跨域? 二.如何解决跨域? 总结 一.什么是跨域? 跨域问题的出现是因为浏览器的同源策略问题.所谓同源就是必须有以下三个相同点:协议相同.主机相同.端口相同.如果其中有一项不同,即出现非同源请求,就会产生跨域.当我们请求一个接口的时候,出现如:Access-Control-Allow-Origin 字眼的时候说明请求跨域了 二.如何解决跨域? 跨域的解决方案: jsonpcorsNode中间件代理(两次跨域) 即 Proxynginx反向代理 CORS支持所有类型的HTTP请求,

随机推荐