vue请求后端接口提示:CORS header miss ‘Access-Control-Allow-Origin’

原因分析:

  url请求中协议、域名、端口中只要有任意一个与当前url不相同,及出现跨域。

解决方案:

  1. JSONP (利用<script>标签的跨域能力)

    例如:

    <img src="图片url地址" alt="" />

    <script src="http://www.example.com?callback=callFn">

  2. CORS(CORS是一种基于HTTP头部的机制,通过在服务器端设置响应头部来允许跨域请求。)

    实现流程:

    浏览器发送一个预检请求到后台服务,后台服务通过响应头中Access-Control-Allow-Origin允许访问请求。下面是一个python flask项目的示例:

    def create_app(config_name):config = configs[config_name]logger = Logger('drsu_mmp').getlog()app = Flask(__name__)CORS(app, resources={r'/*': {'origins': '*'}},supports_credentials=True)app.config.from_object(config)db.init_app(app)return app
    
  3. 代理服务器(通过在同一域名下设置代理服务器,将前端的跨域请求转发到目标服务器上,从而绕过浏览器的同源策略限制),修改vue.config.js文件。

    • 将新接口请求中的跨域host变更为特定值

      const store = new Vuex.Store({strict: process.env.NODE_ENV !== 'production',state : {current_el_menu : '1',host: 'A',//http://xx.xx.xx.xx:8080' //'http://127.0.0.1:5000/',},mutations : {changeMenuId (state, id) {state.current_el_menu = id;localStorage.setItem('current_el_menu', id);},},actions : {},getters : {current_el_menu : state => {return state.current_el_menu || JSON.parse(localStorage.getItem('current_el_menu'));},}
      })
      export default store
      
    • vue2

      module.exports = {dev : {proxyTable : {'/A' : {        //表示会拦截以api为开头的请求target : 'http://xx.xx.xx.xx:8080',    //表示需要请求的目标urlchangeOrigin : true,    // 是否开启跨域pathRewrite : {        //重写路径'^/A' : 'http://xx.xx.xx.xx:8080'       //把特定路径的变为目标host}}},
      
    • vue3

      module.exports = {devServer:{proxy:{'/A' : {        //表示会拦截以api为开头的请求target : 'http://xx.xx.xx.xx:8080',    //表示需要请求的目标urlchangeOrigin : true,    // 是否开启跨域pathRewrite : {        //重写路径'^/A' : 'http://10.10.20.25:8080'       //把特定路径的变为目标host}}}
      }
      

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/764647.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

专业矢量绘图设计软件:Sketch for mac 中文激活版

Sketch for Mac 是一款专业的矢量图形设计工具&#xff0c;主要用于 UI/UX 设计、网页设计、图标设计等领域。它的界面简洁、易用&#xff0c;功能强大&#xff0c;可以帮助设计师快速创建高质量的设计作品。 人性化界面 Sketch的界面非常简洁。最顶端的工具箱包含了最重要的操…

搭建基于 Snowflake 的 CI/CD 最佳实践!

Snowflake 提供了可扩展的计算和存储资源&#xff0c;和基于 SQL 的界面 Snowsight&#xff0c;方便用户进行数据操作和分析。然而&#xff0c;如果用户想将自己的 CI/CD 流程与 Snowflake 集成时&#xff0c;会发现一些不便之处&#xff08;尤其相比其 SnowSight 优秀的查询能…

eclipse中使用PlantUML plugin查看对象关系

一.背景 公司安排的带徒弟任务&#xff0c;给徒弟讲了如何设计对象。他们的思维里面都是单表增删改查&#xff0c;我的脑海都是一个个对象&#xff0c;他们相互关系、各有特色本事。稳定的结构既能满足外部功能需求&#xff0c;又能在需求变更时以最小代价响应。最大程度的记录…

0201线性方程组和矩阵-矩阵及其运算-线性代数

文章目录 一、线性方程组二、矩阵的定义结语 一、线性方程组 设有 n 个未知数 m n个未知数m n个未知数m个方程的线性方程组 { a 11 x 1 a 12 x 2 ⋯ a 1 n x n b 1 , a 21 x 1 a 22 x 2 ⋯ a 2 n x n b 2 , ⋯ a m 1 x 1 a m 2 x 2 ⋯ a m n x n b m , \begin{ca…

Python RPA简单开发实践(selenium登陆浏览器自动输入密码登陆)

打开csdn博客&#xff0c;简单版 class BS:def __init__(self, url):self.url url# self.password password# self.username usernamedef login_url(self):from selenium import webdriver# 不自动关闭浏览器option webdriver.ChromeOptions()option.add_experimental_opt…

【Canvas与艺术】绘制暗绿色汽车速度仪表盘

【原型】 【成果】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>暗绿色汽车速度仪表盘</title><style type"t…

基于Arduino IDE 野火ESP8266模块 MODBUS RTU开发

一、工程创建 1.新建工程&#xff0c;工程另存为modbusRtu。 2.官网搜索modbus 相关库 https://www.arduino.cc/reference/en/libraries/或者在Arduino IDE中库管理中搜索选择modbus库 安装完如下 选择更多信息&#xff0c;会跳到库的代码示例&#xff0c;可查看如何使用该…

python框架的一加剧场管理系统的设计与实现flask-django-nodejs-php

本文讲述了一加剧场管理系统。结合电子管理系统的特点&#xff0c;分析了一加剧场管理系统的背景&#xff0c;给出了一加剧场管理系统实现的设计方案。 本论文主要完成不同用户的权限划分&#xff0c;不同用户具有不同权限的操作功能&#xff0c;在用户模块&#xff0c;主要有用…

数学建模常用代码

Topsis算法基本思想&#xff1a; 基于归一化后的原始数据矩阵&#xff0c;采用余弦法找出有限方案中的最优方案和最劣方案&#xff08;分别用最优向量和最劣向量表示&#xff09;&#xff0c; 然后分别计算各评价对象与最优方案和最劣方案间的距离&#xff0c;获得各评价对象与…

Git多分支管理实践

想要实现本地文件对远程文件的管理&#xff0c;必须懂得Git的相关操作。 工作中不免会遇到一个仓库多个分支的管理。 git多分支管理属于git的进阶版操作&#xff0c;下面我们来看看。 1. 拉取一个git仓库 git仓库名假设为&#xff1a;test_demo&#xff0c;默认是主仓库&…

搞了半天blender整动画这么爽,骨骼重定向一回,动作就可以到处套用,和音频对轨也好使

我们搞到了运动数据&#xff08;可能是bvh文件&#xff0c;也可能是fbx文件&#xff09;之后&#xff0c;想要让某个静态的模型动起来。 我们假定用的是Tpose的模型&#xff08;因为我这个bvh文件是Tpose用的&#xff0c;所以为了动作映射不出问题&#xff0c;优先整的这种模型…

C++开发基础——函数对象与std::function模板

一&#xff0c;函数对象 1.函数对象的概念 函数对象可以像函数那样被直接调用。 函数对象(function objects)又被称为仿函数(functors)。 函数对象可以被当作一个值赋给另一个变量&#xff0c;也可以作为实参传递给其他函数&#xff0c;或者作为其他函数的返回结果。 函数…

1.1-数组-704. 二分查找★

704. 二分查找 ★ 力扣题目链接&#xff0c;给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xff0c;搜索 nums 中的 target&#xff0c;如果存在返回下标&#xff0c;否则返回 -1。n 将在 [1, 10000]之间。 可以假设 nums 中的所…

WM8978 —— 带扬声器驱动程序的立体声编解码器(5)

接前一篇文章&#xff1a;WM8978 —— 带扬声器驱动程序的立体声编解码器&#xff08;4&#xff09; 九、寄存器概览与详解 1. 整体概览 WM8978芯片共有58个寄存器&#xff0c;整体总表如下&#xff1a; 2. 详细说明 在此&#xff0c;只介绍WM8978较为常用的那些寄存器。 &…

C++初阶:string类相关练习题

目录 1. 字符串相加2. 反转字母3. 字符串中唯一字母4. 字符串中最后一个单词5. 验证回文串6. 反转字符II7. 反转字符串中的单词8. 字符串相乘 1. 字符串相加 题目信息&#xff1a; 题目连接&#xff1a; 字符串相加 class Solution { public:string addStrings(string num1, s…

公司管理-技术VS市场

技术型公司往往会出现这样的场景&#xff1a;市场人员抱怨产品差不好卖&#xff1b;技术人员不给力&#xff0c;项目总验收不了。技术人员抱怨市场人员只管签单&#xff0c;什么都敢答应。这就是矛盾&#xff0c;应该应用矛盾论来解决问题。 产品的发展需要时间、人力的不断投入…

2024龙年新版UI周易测算网站H5源码

支持对接第三方支付 安装方法以linux为例: 1、建议在服务器上面安装宝塔面板,以便操作,高逼格技术员可以忽略这步操作。 2、把安装包文件解压到根目录,同时建立数据库,把数据文件导入数据库 3、修改核心文件config/inc_config.php把数据库信息替换成你的 4、解析域名…

【C语言基础篇】内存处理函数(三)memset的介绍及模拟实现

个人主页&#xff1a; 倔强的石头的博客 系列专栏 &#xff1a;C语言指南 C语言刷题系列 待补充完善

Java 学习和实践笔记(44):数组的声明定义和使用以及初始化

示例代码&#xff1a; public class TestArray {public static void main(String[] args) {/*测试整数型一维数组*/int[] s;//声明s是一个整数数组类型s new int[10];//将s实例化&#xff0c;也就是分配内存空间&#xff0c;真正创建了这个对象//int[] s new int[10];也可以…

如何设计一个可扩展的Web应用架构?

如何设计一个可扩展的Web应用架构&#xff1f; 设计一个可扩展的Web应用架构是一个复杂而重要的任务&#xff0c;需要综合考虑多个方面&#xff0c;包括技术选型、系统架构、性能优化等。以下是一些关键步骤和策略&#xff0c;可以帮助您设计一个可扩展的Web应用架构&#xff…