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 Flask app = 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 os print(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)
element-ui + vue + node.js 与 服务器 Python 应用的跨域问题的更多相关文章
- vue cli3.3 以上版本配置vue.config.js 及反向代理操作解决跨域操作
const webpack = require('webpack') module.exports = { configureWebpack: { plugins: [ new webpack.Pro ...
- 【Node】node.js实现服务器的反向代理,解决跨域问题
跨域对于前端来说是一个老大难的问题,许多方法如jsonp.document.domain + iframe...都有或多或少的问题,一个最佳实践就是通过服务器nginx做反向代理,但奈何不懂相关知识, ...
- 用http-server 创建node.js 静态服务器
今天做一本书上的例子,结果代码不能正常运行,查询了一下,是语法过时了,书其实是新买的,出版不久. 过时代码如下 var connect=require('connect'); connect.crea ...
- vue+node.js+webpack开发微信公众号功能填坑——v -for循环
页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...
- Node.js创建服务器和模拟客户端请求
1. 何为服务器 服务器是某种长期运行,等待请求资源的应用程序 2. 常见Web应用架构 3. 如何创建web服务器 Web服务器是使用HTTP协议,等待客户端连接后请求资源的驻守应用程序:HTTP协 ...
- 基于 Node.js 的服务器自动化部署搭建实录
基于 Node.js 的服务器自动化部署搭建实录 在服务器上安装 Node.js 编写拉取仓库.重启服务器脚本 配置 Github 仓库的 Webhook 设置 配置 Node.js 脚本 其他问题 ...
- 小白学习VUE第二课:环境搭建 VUE Node.js VSCode template模板
环境搭建 VUE Node.js VSCode template模板: 首先安装node:http://www.runoob.com/nodejs/nodejs-install-setup.html ...
- 深入浅出node.js游戏服务器开发1——基础架构与框架介绍
2013年04月19日 14:09:37 MJiao 阅读数:4614 深入浅出node.js游戏服务器开发1——基础架构与框架介绍 游戏服务器概述 没开发过游戏的人会觉得游戏服务器是很神秘的 ...
- 前端走进机器学习生态,在 Node.js 中使用 Python
这次给大家带来一个好东西,它的主要用途就是能让大家在 Node.js 中使用 Python 的接口和函数.可能你看到这里会好奇,会疑惑,会不解,我 Node.js 大法那么好,干嘛要用 Python ...
随机推荐
- 【redis专题(1)】安装与启动
简介 REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo(redis之父)写的key-value存储系统. Redis提供了一些丰富的数据 ...
- 大表分批删除脚本之MySQL版
经常需要定期对某些表删除历史数据,通常这样的表的数据又是非常巨大,为了减轻对线上环境的影响,删除时必须分成小批量来进行. 以前分享过SQLServer的版本. 下面是MySQL版本: delimite ...
- python第十八天
学习内容: json 模块,pickle模块,shelve模块,xml模块 json 模块 序列化: import json,pickle info={ 'name':'a', 'age':34, ...
- Sql Server 只有MDF文件恢复数据库的方法以及2008清除日志文件
首先建立同名的空数据库,然后停止数据库服务运行,将MDF文件覆盖后启动服务,并修改和执行下面的语句. alter database JinMa_NYGL set EMERGENCY alter dat ...
- 在excel中将缺失数据全部用0补齐
先ctrl+H ,出现如下对话框 点击“定位”,选择“空值” 在表格中空的位置上编辑栏输入0,CTRL+ENTER,即可将缺失数据全部用0补齐.
- 2018. first week now at home
外面雪刚停. 现在是2018.1.5 2018 needs to consider next steps了.未雨绸缪啊 下面是2017年last working day 外面黑了,水面上黑 ...
- 转://oracle 11gR2 oracle restart 单机使用asm存储 主机名发生更改处理过程
oracle 11gR2 oracle restart 单机使用asm存储 主机名发生更改并且主机重启后处理过程: 以下为解决方案: 1. Remove Oracle Restart configur ...
- 【转】字符编码笔记:ASCII、Unicode、UTF-8 和 Base64
1. ASCII码 我们知道,在计算机内部,所有的信息最终都表示为一个二进制的字符串.每一个二进制位(bit)有0和1两种状态,因此八个二进制位就可以组合出256种状态(-128~127),这被称为一 ...
- jquery $("[id$='d']").val();这句话什么意思?
获得id后缀为d字符的值.应该是属于input标签.谢谢 匹配给定的属性是以某些值结尾的元素,比如<span id="ad">test</span>< ...
- Arduino IDE for ESP8266 ()esp8266项目 WIFI攻击器
https://www.wandianshenme.com/play/esp8266-nodemcu-create-portable-wifi-jammer/ 使用 ESP8266 制作 WiFi 干 ...