Vue前端-Flask后台跨域访问问题的处理

朴灿烈づ我的快乐病毒、 2022-11-15 12:55 208阅读 0赞

采用前后端分离的方式开发WEB应用，前端适用了Vue.js，后端用的是Flask。  
在使用axios进行前后台交互时，浏览器控制台报错：

> blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZtMDUxNw_size_16_color_FFFFFF_t_70_pic_center]  
经查，是跨域访问限制问题，即浏览器发出的前后台交互请求（指向flask server），与地址栏请求（指向node.js server）不同。

一种比较直接的解决方法是在Flask后台中，作如下修改：

from flask import Flask
    from flask_cors import *  # 注意这一行-01
    
    # 创建webapp应用,__name__是python预定义变量，被设置为使用本模块.
    webapp = Flask(__name__)
    CORS(webapp, supports_credentials=True)  # 注意这一行-02
    
    # 此处对应了路由文件routes.py中的内容
    from app import routes

通过flask\_cors模块来处理跨域请求。

另一种可行的方法是将node.js server和flask server都用nginx进行部署，利用nginx的反向代理功能，使浏览器发送给前者和后者的请求，都指向nginx，从而将“跨域请求”转换成“不跨域请求”。这种方法后面再摸索一下。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZtMDUxNw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/f31dd322d07949b680afdd8e74f6ecfa.png

发表评论取消回复

表情：

评论列表（有 0 条评论，208人围观）

还没有评论，来说两句吧...

相关阅读

相关前端处理跨域问题

处理跨域问题由于发起ajax请求的域为http://localhost:5173, 而后台服务器的域为http://localhost:8080, 所

港控/mmm°/ 2024年04月06日 14:59/ 0 赞/ 52 阅读

相关 vue前端解决跨域问题（axios）

vue前端解决跨域问题（axios） 1、安装环境 2、配置代理 1.在config文件夹下的index.js文件中的proxyTable字段中，

朴灿烈づ我的快乐病毒、/ 2023年02月18日 01:57/ 0 赞/ 92 阅读

相关 Flask解决跨域问题

Flask解决跨域问题什么是跨域问题最近在做一个前后端分离的项目时，需要前端向后端发起请求然后得到数据，却始终拿不到后端返回的数据，但是通过浏览器直接访问这个接口

拼搏现实的明天。/ 2023年01月19日 14:55/ 0 赞/ 141 阅读

相关 vue跨域处理

跨域 vue.config.js 找到devServer替换 devServer: { // localhost:9529 /

忘是亡心i/ 2022年11月19日 04:20/ 0 赞/ 164 阅读

相关 Vue前端-Flask后台跨域访问问题的处理

采用前后端分离的方式开发WEB应用，前端适用了Vue.js，后端用的是Flask。在使用axios进行前后台交互时，浏览器控制台报错： > blocked by COR

朴灿烈づ我的快乐病毒、/ 2022年11月15日 12:55/ 0 赞/ 209 阅读

相关入门前端-Vue 解决跨域问题

什么是跨域 > 跨域俗称[跨源资源共享（CORS）][CORS]是一种基于`HTTP` 头的机制，该机制通过允许服务器标示除了它自己以外的其它`origin`（域，协议和

快来打我*/ 2022年09月06日 00:15/ 0 赞/ 229 阅读

相关前端跨域访问

一、同源策略做过开发的都知道，从A网站通过Ajax来请求另外一个B网站的特定内容，是很常见的需求，但是出于安全的考虑，浏览器是不允许你这样做的，这就是浏览器的同源策略；

曾经终败给现在/ 2022年06月14日 01:44/ 0 赞/ 230 阅读

相关 ajax跨域后台允许跨域访问

参考博文：[https://blog.csdn.net/djl0906/article/details/70238847][https_blog.csdn.net_djl090

小咪咪/ 2022年05月18日 04:16/ 0 赞/ 332 阅读

相关 vue前端访问后台微服务跨域问题

1、部署现状前端VUE部署在Nginx服务中后台微服务通过NodeJS网关反向代理 2、问题现状 Request header field Aut

绝地灬酷狼/ 2022年05月15日 00:34/ 0 赞/ 440 阅读

相关 vue 的跨域访问

一：前言最近在做一个项目的时候需要去请求资源，因此使用axios来get请求，但一直报跨域错误。 `Access to XMLHttpRequest at 'http

分手后的思念是犯贱/ 2021年09月03日 05:23/ 0 赞/ 456 阅读