解决vue axios跨域请求发送两次问题

问题:

vue axios跨域请求,在Request HeadersAuthorization传递Token时,发现统一请求触发了两次,第一次是Request Method: OPTIONS请求。

原因:

跨域请求时,浏览器会首先使用OPTIONS方法发起一个预请求,判断接口是否能够正常通讯。如果通讯异常,则不会发送真正的请求,如果测试通讯正常,则开始真正的请求。

解决方法:

后台:判断请求方式是OPTIONS,则不处理;

预请求

发送真正请求

 PHP解决方法

class Common extends Controller
{
    public function _initialize()
    {
        parent::_initialize(); // TODO: Change the autogenerated stub
        // 解决跨域问题
        header(‘Access-Control-Allow-Origin:*‘);
        // 响应类型
        header(‘Access-Control-Allow-Methods:*‘);
        // 响应头设置
        header(‘Access-Control-Allow-Headers:*‘);

        // 解决 axios跨域请求发送两次问题
        if (Request::instance()->isOptions()) {
            exit();
        }
    }
}

后台对预请求不处理

如果是JAVA后台,请看这篇文章:https://www.cnblogs.com/itmrzhang/p/11003474.html

原文地址:https://www.cnblogs.com/wordblog/p/12171875.html

时间: 2024-10-03 19:43:43

解决vue axios跨域请求发送两次问题的相关文章

springboot vue axios 跨域请求

一个简单的例子 在vue工程中,安装axios npm install axios src/main.js 配置如下 import axios from 'axios' Vue.prototype.$axios = axios Vue.config.productionTip = false axios.defaults.withCredentials = false//这个默认即为false,如果改为true,可以传递session信息,后端要做相应修改来放行,本例中我们用false简单测试

axios跨域请求报错:Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

在做项目时,用到axios,数据用post提交时,老是报错,错误提示为: 1 Access to XMLHttpRequest at 'http://127.0.0.1:3000/api/add' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers i

vue+axios跨域解决方法

通过这种方法也可以解决跨域的问题. 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) 例如请求的url:"http://f.apiplus.cn/bj11x5.json" 1.打开config/index.js,在proxyTable中添写如下代码: 1 2 3 4 5 6 7 8 9 proxyTable: {    '/api': {  //使用"/api"来代替"http://f.apiplus.c&quo

ASP.NET MVC 实现AJAX跨域请求的两种方法

通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据的加载,例如Google. 在ASP.NET MVC 框架里实现跨域的AJAX请求有几种方式可以实现,以下就介绍常用的两种方法. 1.     发送JSONP请求 客户端: JQuery对发送JSONP请求有很好的支持,客户端通过. ajax() 函数发送请求,其中需要制定 dataType 为“jsonp”  jsonpCallback 为指定的回调函

关于跨域请求的两种方案

cors方式 之前在chrome控制台看到金蝉同一个请求有的时候会发送两个(多出一个OPTION的情况)的情况,有点奇怪,经过一顿研究发现原来这个是 CORS 实现跨域 非简单请求 的处理方式.具体内容参见阮大神的文档跨域资源共享 CORS 详解. jsonp方式 原理 利用<script>标签src不受同源策略限制. 缺点 <script>请求的内容会直接执行,那么这就要求接口返回的东西是浏览器可执行的,目前的实现方式都是把结果包装成callback(reslut)这种模式,但是

ASP.NET MVC 实现跨域请求的两种形式

一.使用jsonp请求 1 $.ajax({ 2 type: "GET", 3 url: "http://10.174.1.1/Home/Test?callback=?", 4 data: { id: "1" }, 5 dataType: "jsonp", 6 jsonp: "callback", 7 success: function (data) { 8 alert(data); 9 }, 10 err

跨域请求的两种实现方式

Jsonp 域1 index.html <script> $(".get-service").click(function () { $.ajax({ url: "http://127.0.0.1:8005/service/", type: "get", dataType: "jsonp", jsonp: "callbacks", // 伪造ajax, 基于script // jsonpCall

vue+axios跨域等问题

以前学习使用vue,axios以及fetch去连接一个接口时遇到一些问题,这些问题都已经解决了,拿出来和大家分享一下. 先给大家发一下成功之后的截图.

Vue之Axios跨域问题解决方案

// axios 中的GET请求 axios.get('/user', { params: { ID: '001' } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // axios 中的POST请求 axios.post('/user', { firstName: '1', lastName: '2' }) .then(func