跨越问题解决的两种办法:

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 应用的跨域问题的更多相关文章

  1. vue cli3.3 以上版本配置vue.config.js 及反向代理操作解决跨域操作

    const webpack = require('webpack') module.exports = { configureWebpack: { plugins: [ new webpack.Pro ...

  2. 【Node】node.js实现服务器的反向代理,解决跨域问题

    跨域对于前端来说是一个老大难的问题,许多方法如jsonp.document.domain + iframe...都有或多或少的问题,一个最佳实践就是通过服务器nginx做反向代理,但奈何不懂相关知识, ...

  3. 用http-server 创建node.js 静态服务器

    今天做一本书上的例子,结果代码不能正常运行,查询了一下,是语法过时了,书其实是新买的,出版不久. 过时代码如下 var connect=require('connect'); connect.crea ...

  4. vue+node.js+webpack开发微信公众号功能填坑——v -for循环

    页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...

  5. Node.js创建服务器和模拟客户端请求

    1. 何为服务器 服务器是某种长期运行,等待请求资源的应用程序 2. 常见Web应用架构 3. 如何创建web服务器 Web服务器是使用HTTP协议,等待客户端连接后请求资源的驻守应用程序:HTTP协 ...

  6. 基于 Node.js 的服务器自动化部署搭建实录

    基于 Node.js 的服务器自动化部署搭建实录 在服务器上安装 Node.js 编写拉取仓库.重启服务器脚本 配置 Github 仓库的 Webhook 设置 配置 Node.js 脚本 其他问题 ...

  7. 小白学习VUE第二课:环境搭建 VUE Node.js VSCode template模板

    环境搭建 VUE Node.js VSCode template模板: 首先安装node:http://www.runoob.com/nodejs/nodejs-install-setup.html ...

  8. 深入浅出node.js游戏服务器开发1——基础架构与框架介绍

    2013年04月19日 14:09:37 MJiao 阅读数:4614   深入浅出node.js游戏服务器开发1——基础架构与框架介绍   游戏服务器概述 没开发过游戏的人会觉得游戏服务器是很神秘的 ...

  9. 前端走进机器学习生态,在 Node.js 中使用 Python

    这次给大家带来一个好东西,它的主要用途就是能让大家在 Node.js 中使用 Python 的接口和函数.可能你看到这里会好奇,会疑惑,会不解,我 Node.js 大法那么好,干嘛要用 Python ...

随机推荐

  1. 【redis专题(1)】安装与启动

    简介 REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo(redis之父)写的key-value存储系统. Redis提供了一些丰富的数据 ...

  2. 大表分批删除脚本之MySQL版

    经常需要定期对某些表删除历史数据,通常这样的表的数据又是非常巨大,为了减轻对线上环境的影响,删除时必须分成小批量来进行. 以前分享过SQLServer的版本. 下面是MySQL版本: delimite ...

  3. python第十八天

    学习内容: json 模块,pickle模块,shelve模块,xml模块 json 模块  序列化: import json,pickle info={ 'name':'a', 'age':34, ...

  4. Sql Server 只有MDF文件恢复数据库的方法以及2008清除日志文件

    首先建立同名的空数据库,然后停止数据库服务运行,将MDF文件覆盖后启动服务,并修改和执行下面的语句. alter database JinMa_NYGL set EMERGENCY alter dat ...

  5. 在excel中将缺失数据全部用0补齐

    先ctrl+H ,出现如下对话框 点击“定位”,选择“空值” 在表格中空的位置上编辑栏输入0,CTRL+ENTER,即可将缺失数据全部用0补齐.

  6. 2018. first week now at home

    外面雪刚停. 现在是2018.1.5 2018 needs to consider next steps了.未雨绸缪啊     下面是2017年last working day   外面黑了,水面上黑 ...

  7. 转://oracle 11gR2 oracle restart 单机使用asm存储 主机名发生更改处理过程

    oracle 11gR2 oracle restart 单机使用asm存储 主机名发生更改并且主机重启后处理过程: 以下为解决方案: 1. Remove Oracle Restart configur ...

  8. 【转】字符编码笔记:ASCII、Unicode、UTF-8 和 Base64

    1. ASCII码 我们知道,在计算机内部,所有的信息最终都表示为一个二进制的字符串.每一个二进制位(bit)有0和1两种状态,因此八个二进制位就可以组合出256种状态(-128~127),这被称为一 ...

  9. jquery $("[id$='d']").val();这句话什么意思?

    获得id后缀为d字符的值.应该是属于input标签.谢谢 匹配给定的属性是以某些值结尾的元素,比如<span id="ad">test</span>< ...

  10. Arduino IDE for ESP8266 ()esp8266项目 WIFI攻击器

    https://www.wandianshenme.com/play/esp8266-nodemcu-create-portable-wifi-jammer/ 使用 ESP8266 制作 WiFi 干 ...