element-ui + vue + node.js 与 服务器 Python 应用的跨域问题
跨越问题解决的两种办法:
1. 在 config => index.js 中配置 proxyTable 代理:
proxyTable: {'/charts': {target: 'http://localhost:5001',changeOrigin: true,pathRewrite: {'^/charts':'/charts'}}}
说明: /charts:以其开头的所有路径请求转发,.changeOrigin 参数为true: 本地会虚拟一个服务器接收请求,并转发该请求
2. 在 config => dev.env.js 中配置BASE_API,由后端应用解决
module.exports = {NODE_ENV: '"development"',ENV_CONFIG: '"dev"',BASE_API: '"http://localhost:5001"' }
在Python应用中处理跨域问题:
- 方法1:使用 flask_cors
from flask_cors import CORS # 解决跨域问题 from flask import Flaskapp = Flask(__name__) app.config.from_object(base_conf.config["development']) # CORS(app, resources={"/charts/*",{"origins": "*"})
CORS(app, supports_credentials=True)
- 方法2: 对 请求头部添加信息
@app.after_request def af_request(resp): """ #请求钩子,在所有的请求发生后执行,加入headers。:param resp::return:""" resp = make_response(resp)resp.headers['Access-Control-Allow-Origin'] = '*'resp.headers['Access-Control-Allow-Methods'] = 'GET,POST'resp.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'return resp
- nginx
server {listen 8001;access_log /var/log/openresty/access.log basic;location / {proxy_pass http://127.0.0.1:9527;# proxy_pass http://node;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header Host $http_host;proxy_set_header X-Nginx-Proxy true;proxy_redirect off;}
location /charts {
proxy_pass http://127.0.0.1:5000;
proxy_set_header Host $http_host;
proxy_cookie_path /charts /charts;
}
}
或者,打包之后:
server {listen 80;access_log /var/log/openresty/access.log basic;location / {root /opt/app/reports-web/dist;index index.html index.htm;}location /charts {proxy_pass http://127.0.0.1:5000;proxy_set_header Host $http_host;proxy_cookie_path /charts /charts;#proxy_cookie_domain localhost:80 http://127.0.0.1:5000; } }
- Python
from flask import render_template, Flask import osprint(os.path.abspath(os.curdir)) app = Flask(__name__, static_folder="F:/workspace/reports/web/dist/static",template_folder="F:/workspace/reports/web/dist")@app.route('/') def index():return render_template('index.html')""" 其他与前端交互的接口与视图 """@app.route('/') def favicon():return app.send_static_file("web/favicon.ico")if __name__ == '__main__':app.run(host='0.0.0.0', port=8000, debug=True)
转载于:https://www.cnblogs.com/spaceapp/p/10334646.html
element-ui + vue + node.js 与 服务器 Python 应用的跨域问题相关推荐
- vue cli3.3 以上版本配置vue.config.js 及反向代理操作解决跨域操作
const webpack = require('webpack') module.exports = { configureWebpack: { plugins: [ new webpack.Pro ...
- node.js express配置响应头解决跨域问题
// app.js中 var app = express(); /** 自定义中间件 */ var allowCrossDomain = function (req, res, next) {// 所 ...
- vue.config.js配置完代理还是提示跨域?
哥,配置了代理之后,请求的url是向代理服务器发请求.请求的url的host和端口改一下,配置的时候如果设置了pathRewrite,也改改url.
- 基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册 前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
- 【Node】node.js实现服务器的反向代理,解决跨域问题
跨域对于前端来说是一个老大难的问题,许多方法如jsonp.document.domain + iframe...都有或多或少的问题,一个最佳实践就是通过服务器nginx做反向代理,但奈何不懂相关知识, ...
- vue+node.js+mysql项目搭建
前言 用vue搭建前端页面.用node开发后端接口.数据库用mysql 可行性分析 缺点: nodejs单线程,不能做cpu密集型操作,导致时间片不能释放,阻塞后面的任务. nodejs可靠性比较低, ...
- vue+node.js前后端交互中的token令牌验证
这篇文章分享一下本人学习vue+node.js前后端交互中的登录token令牌的心得 最近准备写一个个人博客网站,前端采用的是vue+element,后端用node.js 在做用户登录的时候就想到 如 ...
- boa支持https_Boa: 在 Node.js 中使用 Python
Hello,大家好,有一段时间不见了. 这次主要给大家带来一个好东西,它的主要用途就是能让大家在 Node.js 中使用 Python 的接口和函数.可能你看到这里会好奇,会疑惑,会不解,我 Node ...
- node.js 创建服务器_Node.js HTTP软件包–创建HTTP服务器
node.js 创建服务器 An HTTP server caters to client requests and sends appropriate response. For example, ...
最新文章
- jdk默认垃圾收集器
- UVa272-TeX中的引号
- CTF基本赛制与题型
- 人人都能学会的python编程教程1:第一行代码
- Android系统中用C语言来编写服务程序并且开机自启动运行服务
- jQuery插件开发详细教程
- Linux下定时切割nginx日志并删除指定天数前的日志记录
- Maven安装与配置(详细步骤)
- 华硕服务器 u盘安装系统,华硕电脑u盘安装系统教程
- oracle查找隐藏字符串,oracle chr(0) 隐藏字符串
- matlab 功率谱密度 汉宁窗_Matlab实例|频谱、功率谱和功率谱密度计算详解
- 搭建个人博客【搭建Hexo+Fluid博客并部署到GitHub/云服务器(阿里云/腾讯云)】
- 港澳台、内地身份证号校验规则
- 泥瓦匠聊并发编程:线程与多线程必知必会(基础篇)
- Camera360 一款强大的手机拍照必备软件
- 推送github报错“The remote end hung up unexpectedly”解决办法
- ANSYS Electronic各类
- 1.1 命题逻辑 笔记
- Wireless Power Tranmissions
- Caffe深度学习框架上手教程
热门文章
- Silverlight视频教程、资源下载。如果你觉得看图文不够形象,不够生动,那就看看视频吧。...
- 在当当买了python怎么下载源代码-Python爬取当当、京东、亚马逊图书信息代码实例...
- 基于python的游戏设计与实现-基于Python的飞机大战游戏系统设计与实现开题报告...
- 会python可以从事什么工作-Python入门后,想要从事自由职业可以做哪方面工作?...
- python推荐书籍-有哪些 Python 经典书籍?
- python数据类型-Python核心数据类型概览
- python书籍推荐知乎-python入门书籍(爬虫方面)有哪些推荐?
- python简单代码 春节集五福-我用 Python 集齐了五福
- python代码翻译-用python实现百度翻译的示例代码
- python教程第四版pdf下载-笨办法学python 第四版 中文pdf高清版