Vue跨域请求问题解决方案过程解析

一、这是我们本次要请求的url接口地址http://iwenwiki.com/api/blueberrypai/getBlueBerryJamInfo.php

查看页面响应信息，提示跨域有问题

####

二、解决上面跨域问题：根目录写入以下vue.config.js

// vue.config.js

module.exports = {
 devServer: {
  proxy: {
   // 配置跨域
   '/api': {
    target: 'http://iwenwiki.com',
    ws: true,
    changOrigin: true,
    pathRewrite: {
     '^/api': ''
    }
   }
  }
 },
}

三、然后在发送ajax请求的地方做如下操作，使用在上面文件中配置的api。api/blueberrypai/getBlueBerryJamInfo.php是我的请求路径一部分，根据自己具体需求写。然后请求就可以成功发送。

配置完成之后一定要重启（重点！！！）

####

四、如果想不填写其中“/api”,也可以去main.js中配置全局配置，具体如下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue-cli项目开发/生产环境代理实现跨域请求

    开发环境中跨域 使用vue-cli创建的项目,开发地址是localhost:8080,需要访问非本机上的接口http://192.168.0.112:8080/cms/queryMaterial.不同域名之间的访问,需要跨域才能正确请求.跨域的方法很多,通常都需要后台配置,不过vue-cli创建的项目,可以直接利用node.js代理服务器,通过修改vue proxyTable接口实现跨域请求.在vue-cli项目中的config文件夹下的index.js配置文件中,修改前的dev: dev: {

  • 详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)

    在用vue做前端开发的时候,因为一般跑vue使用的webpack自带的node服务,而我们实际要使用的数据确是后台服务器上的,所以这就涉及到服务器请求跨域的问题.本来在诸如axios之类的网络请求参数里面配置 withCredentials: true, 就可以解决跨域问题的,但是现在浏览器比如chorme有做了新的跨域限制,比如要服务器端配置允许跨域才行,详见跨域问题解决,是英文的,看起来需要花点功夫:那有没有不需要服务器端配置就能解决浏览器的跨域问题的办法呢?答案肯定是有的!! 这里就说ch

  • vue2.0设置proxyTable使用axios进行跨域请求的方法

    vue2.0设置proxyTable使用axios进行跨域请求的方法

    这里请求的是知乎日报的api,由@izzyleung这位大神提供的,这是github地址. 在vue-cli构建的项目中先安装axios npm install axios -S 这里暂不考虑用vuex封装的方式,只讲在当前组件中直接使用. 先在<script>中引入 用prototype将axios添加为vue原生的属性,$ajax相当于axios的别名. 然后在要调用的方法或是钩子中请求,$ajax就是上面注册的axios,如果想直接用axios不想设置prototype也可以直接按官方的

  • vue使用代理解决请求跨域问题详解

    在日常开发中,我们前端必不可少的需要像后端请求数据. 但是一般前后端分离,所以域名.端口等肯定不尽相同,这样就不可避免的会遇到浏览器的同源策略限制. 在一般情况下,后端都会设置请求跨域允许的来源.方法等. 但是也保不准后端疏忽而忘记这个问题. 那为了不影响我们的开发,前端只能被动的去找后端解决跨域问题. 其实,我们前端也可以解决跨域问题,那就是使用代理. 举个例子: 我请求的地址是这个:http://192.168.12.36:9000/api/SourceManager 但是我本地的vue项目

  • vue-cli axios请求方式及跨域处理问题

    vue-cli axios请求方式以及跨域处理 安装axios cnpm install axios --save 在要使用axios的文件中引入axios main.js文件 :import axios from 'axois' 要发送请求的文件:import axios from 'axois' 在config/index.js文件设置代理 dev: { proxyTable: {// 输入/api 让其去访问http://localhost:3000/api '/api':{ target

  • 利用SpringMVC过滤器解决vue跨域请求的问题

    之前写过通过注释的方法解决跨域请求的方法,需要每次都在controll类使用注解,这次通过springmvc的拦截器解决: 继承SpringMVC的类HandlerInterceptor重写preHandle方法,这个方法会在到达 controll之前调用,如下 public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

  • vue+springboot实现项目的CORS跨域请求

    跨域资源共享CORS(Cross-origin Resource Sharing),是W3C的一个标准,允许浏览器向跨源的服务器发起XMLHttpRequest请求,克服ajax请求只能同源使用的限制.关于CORS的详细解读,可参考阮一峰大神的博客:跨域资源共享CORS详解.本文为通过一个小demo对该博客中分析内容的一些验证. 1.springboot+vue项目的构建和启动 细节不在此赘述,任何简单的springboot项目就可以,而前端vue项目只需用axios发ajax请求即可. 我的d

  • 使用proxytable 配置解决 vue-cli 的跨域请求问题【推荐】

    使用proxytable 配置解决 vue-cli 的跨域请求问题【推荐】

    本文适用人群: 会使用 vue-cli 搭建一个基本的 vue webpack 项目,本文的目录结构基于 webpack 模板结构 懂得 axios 基本用法 问题导向 日常开发中,前端经常需要通过 ajax 从后端获取数据.而在这种前后端分离的开发模式下,往往前端项目与后端项目的 IP地址.端口号.协议 大概率是不一样的,由于浏览器的安全策略设定,不进行相应配置的话,前端的请求就会被浏览器拦截掉啦. 假设某个页面组件在加载的时候会向后端发送一个请求,然后根据返回的结果来渲染页面.代码示例如下:

  • Vue跨域请求问题解决方案过程解析

    一.这是我们本次要请求的url接口地址http://iwenwiki.com/api/blueberrypai/getBlueBerryJamInfo.php 查看页面响应信息,提示跨域有问题 #### 二.解决上面跨域问题:根目录写入以下vue.config.js // vue.config.js module.exports = { devServer: { proxy: { // 配置跨域 '/api': { target: 'http://iwenwiki.com', ws: true,

  • Spring Boot和Vue跨域请求问题原理解析

    这篇文章主要介绍了Spring Boot和Vue跨域请求问题原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 使用Spring Boot + Vue 做前后端分离项目搭建,实现登录时,出现跨域请求 Access to XMLHttpRequest at 'http://localhost/open/login' from origin 'http://localhost:8080' has been blocked by CORS pol

  • 简单了解django处理跨域请求最佳解决方案

    一.什么是跨域请求 跨域: 简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容.这显然是不安全的.为此,浏览器的鼻祖:网景(Netscape)公司提出了优秀的解决方案:著名的浏览器同源策略.现在所有支持JavaScript的浏览器都会使用这个策略. 同源:域名.协议.端口均相同的网站即为同源. 流程: 当一个浏览器的两个Tab页分别打开百度和谷歌页面时,百度发起一个脚本执行,此时浏览器会检查该脚本属于哪个页面.即检查是否同源.只有和百度同源的脚本才会被

  • 关于JSONP跨域请求原理的深入解析

    关于JSONP跨域请求原理的深入解析

    目录 什么是同源策略 什么是JSONP 练习 jsonp的缺点 总结 什么是同源策略 同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略. 简单来讲,域名,协议,端口相同.当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面.当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行.如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问. 什么是J

  • 轻松搞定jQuery+JSONP跨域请求的解决方案

    JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP.用 JSONP 抓到的资料

  • Django CSRF跨站请求伪造防护过程解析

    前言 CSRF全称Cross-site request forgery(跨站请求伪造),是一种网络的攻击方式,也被称为"One Click Attack"或者Session Riding,通常缩写为CSRF或者XSRF. 攻击原理 1.用户访问正常的网站A,浏览器就会保存网站A的cookies. 2.用户在访问恶意网站B, 网站B上有某个隐藏的链接会自动请求网站A的链接地址,例如表单提交,传指定的参数. 3.恶意网站B的自动化请求,执行就是在用户A的同一个浏览器上,因此在访问网站A的时

  • js跨域请求的5中解决方式

    跨域请求数据解决方案主要有如下解决方法: JSONP方式 表单POST方式 服务器代理 Html5的XDomainRequest Flash request 分开说明: 一.JSONP: 直观的理解: 就是在客户端动态注册一个函数 function a(data),然后将函数名传到服务器,服务器返回一个a({/*json*/})到客户端运行,这样就调用客户端的 function a(data),从而实现了跨域. 诞生背景: 1.Ajax直接请求普通文件存在跨域无权访问的问题,甭管是静态页面.动态

  • ThinkPHP 5 AJAX跨域请求头设置实现过程解析

    最近用thinkphp做项目,在测试环境时,存在接口的测试问题.在tp官网也没能找到相关的解决方法.自已看了一下源码,有如下的解决方案. 在项目目录下面,创建common/behavior/CronRun.php文件,文件内容如下: <?php /** * Created by PhpStorm. * User: LiuYang * Date: 2017/3/9 * Time: 19:37 */ namespace app\common\behavior; use think\Exception

  • Django中使用CORS实现跨域请求过程解析

    跨域请求: 请求url包含协议.网址.端口,任何一种不同都是跨域请求. 1.安装cors模块 pip install django-cors-headers 2.添加应用 INSTALLED_APPS = ( ... 'corsheaders', ... ) 3.设置中间件 MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', ... ] 4.添加允许访问的白名单,凡是出现在白名单的域名都可以访问后端接口 # CORS CORS_ORIG

随机推荐