解决vue $http的get和post请求跨域问题

vue $http的get和post请求跨域问题

首先在config/index.js中配置proxyTable

 proxyTable: {
      '/api':{
          // target:'http://jsonplaceholder.typicode.com',
          target:'http://localhost:9080',
          changeOrigin:true,

           pathRewrite:{
               '/api':''
           }
      }

用户名和密码登录的表单提交

methods: {
// get请求
            //  submitForm() {
            //      var formData=JSON.stringify(this.ruleForm);
            //      this.$http.get('/api/amdatashift/login/probe').then(function(data){

            //      }).catch(function(){
            //          console.log("服务器异常");
            //  });
            //  }
  //post请求
             submitForm() {
                 var formData=JSON.stringify(this.ruleForm);
                 this.$http.post('/api/amdatashift/login/user',{

                     username:this.ruleForm.username,
                     password:this.ruleForm.password
                 },{
                            emulateJSON:true
                        }).then(function(data){
                      console.log(data);
                 }).catch(function(){
                     console.log("服务器异常");
             });
             }
      }

值得注意的是:

1、一定要设置 {emulateJSON: true},不然跨域不成功.

2、跨域在chrome浏览器中你看到的还是http://localhost:8080(即你启动vue的地址,而不是你服务器应用的地址),所以你看到不要惊讶,其实是跨域成功的。

3、http请求中要带上/api,经过index.js的代理会将/api去掉,浏览器中的访问地址为http://localhost:8080/api/amdatashift/login/user,然后实际的访问的地址是http://localhost:9080/amdatashift/login/user。通过代理就实现了跨域访问。

vue el-upload上传控件一直报跨域问题 post请求变成get请求

最近做vue的上传,用的是elmentui的el-upload控件,结果一直出幺蛾子,希望大家少走坑。

不多说 截图上代码。

1。搬控件改action地址

配置好了后,直接测试,emmm ..... 报错 如下:

提示了跨域问题,这个能理解毕竟我是本机开发前端服务和后端服务端口不一样。

查找资料,vue跨域问题的解决方案,然后说的开启代理。

找到vue项目的config中的index.js文件打开,添加如图中的东西。 注意changeOrigin是true。这个意思用/api代替http://192.158.111.101:8000。例子:原地址'http://localhost:8000/ssmShow/upload' 现地址'/api/ssmShow/upload'。

所以上传控件改为:

测试 ;emmmm。。。又错了

还是报错跨域,而且请求了2次,而且请求有问题啊

文件上传应该还是post请求,结果这边一个get请求 一个options请求。懵逼。302的状态不会改,先去搞后面这个500的报错。

options的请求网上有他的解释和处理方法 我照着改了(方法是用过滤器截取请求,并修改) 贴代码 我的是java 后台。

添加过滤器。

同时web.xml需要添加如下

改后重启java后台,测试 emmm。。。如下:

这次厉害了 调用三次接口了 ,我去。不过好的情况是 options请求已经返回正确了,因为options请求返回正确了,所以请求了第三次。

仔细看了下第三次请求,这个是个get请求啊。附件上传怎么就是个get请求呢。

网上找了很久,大家都说的el-upload这个控件有问题。不能用action,于是按照网上方法在action里面加个假的地址,直接在控件的before-upload的钩子函数上动手脚。

直接在这里面用axios的post请求来提交文件。

继续测试

第三次上传请求还是个get请求,这就有问题了,说el-upload中的action有问题就算了 怎么直接调用post请求,会直接变成get请求呢。然后找了好久。在一个老哥的提醒下知道。

js或者vue中当有错误时候,会导致post请求变成get请求。然后我就找了我的错误那就是我的地址。

你说气不气,居然只是这个地方少了斜杠,加上后测试

一切都好了 ,请求只有一个了 post还是post了 文件也上传成功了。虽然很难过 还是很开心。

注意我图中标记的地址,这个里面端口是8080的 还有api字样,这不是我的后台真正地址,这是代理地址,他通过代理就能访问我的真实地址了 ,所以老哥们别看见端口不对 或者地址路径不对就认为不对了 这个是对的。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue开发中遇到的跨域问题及解决方法

    跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地址,b页面为域名地址,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源. 1.jsonp 原理是:动态插入script标签,通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入. 由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源,

  • vue中element 的upload组件发送请求给后端操作

    1.用到了before-upload属性, 用于在上传文件前的校验,并且发送请求给后端,传输格式进行文件流传输 什么都不用设置,action属性随便设置,不能为空即可! 在before-upload属性的方法中的代码如下: var _this = this; debugger; // var files=file.target.files[0]; debugger; const isJPG = file.type === "image/jpeg"; const isLt2M = fil

  • 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,

  • 解决vue $http的get和post请求跨域问题

    vue $http的get和post请求跨域问题 首先在config/index.js中配置proxyTable proxyTable: { '/api':{ // target:'http://jsonplaceholder.typicode.com', target:'http://localhost:9080', changeOrigin:true, pathRewrite:{ '/api':'' } } 用户名和密码登录的表单提交 methods: { // get请求 // submi

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

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

  • java解决请求跨域的两种方法

    java解决请求跨域问题,有以下两种写法 1.使用拦截器,实现javax.servlet.Filter接口 import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.servlet.ServletRequest; import javax.servlet.S

  • java 请求跨域问题解决方法实例详解

    java 请求跨域问题解决方法实例详解 新建Util类,在Util中添加下面方法: /* * response请求跨域公共设置 */ public static HttpServletResponse SetHttpServletResponse( HttpServletResponse response) { response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader(&qu

  • Vue axios与Go Frame后端框架的Options请求跨域问题详解

    跨域问题可从前后两端分开排查: 前端:Vue + axios axios 请求头使用 'Content-Type': 'application/json', 并且在Header中设置了 Authorization 字段用于传递 Token, 参数未经 Qs 转码, 使用以下代码测试登录接口: // 为方便操作,已将 axios 实例挂载到 this.$axios 上 this.$axios.post('/signin', {account: '', password: ''}) .then(re

  • ASP.NET WebAPI2复杂请求跨域设置的方法介绍

    ASP.Net Core的跨域设置比较简单  官方都整合了 具体的参见微软官方文档: https://docs.microsoft.com/zh-cn/aspnet/core/security/cors?view=aspnetcore-3.1#ecors 跨域条件 跨域是指的当前资源访问其他资源时发起的http请求由于安全原因(由于同源策略,域名.协议.端口中只要有一个不同就不同源),浏览器限制了这些请求的正常访问,特别需要注意的是这些发生在浏览器中. 解决方法 方法1.web.config文件

  • 使用Filter拦截器如何实现请求跨域转发

    目录 Filter拦截器实现请求跨域转发 在使用Filter实现转发后特做一次记录 使用filter解决跨域 在web.xml配置拦截器 过滤器代码 Filter拦截器实现请求跨域转发 因为公司项目需求,项目中前端请求需要通过一个类似中转的服务转发(请求在该服务中会重新包装一些通用参数) 在使用Filter实现转发后特做一次记录 package com.unicloud.cce.Filter; import com.alibaba.fastjson.JSON; import com.uniclo

  • Ajax请求跨域问题解决方案分析

    本文实例讲述了Ajax请求跨域问题解决方案.分享给大家供大家参考,具体如下: 几乎每种浏览器都存在默认的安全机制,都有同源策略,因为浏览器恶意的把每个外部请求的都当做是黑客攻击,相当于是对自身的保护,所以浏览器在运行脚本时会判断脚本与请求的页面是否是同一来源,这个同一来源,包括1.协议,2.地址,3.端口,只有三者都相同才被认为是同一来源. 一.解决方案: 1,在服务器端的响应头中添加一个http参数: res.setHeader("Access-Control-Allow-Origin&quo

  • spring cloud gateway请求跨域问题解决方案

    这篇文章主要介绍了spring cloud gateway请求跨域问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 @Configuration public class CorsConfig implements GlobalFilter, Ordered { private static final String ALL = "*"; private static final String MAX_AGE =

  • gateway网关与前端请求跨域问题的解决方案

    gateway网关与前端请求的跨域问题 最近因项目需要,引入了gateway网关.可是发现将前端请求的端口指向网关后,用postman发送请求是正常的,用浏览器页面点击请求会出现跨域问题.今天就记录一下自己是怎么解决的. 第一种 直接在yml文件中配置 spring: application: name: service-getway cloud: gateway: globalcors: cors-configurations: '[/**]': # 允许携带认证信息 # 允许跨域的源(网站域

随机推荐