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

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 应用的跨域问题相关推荐

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

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

  2. node.js express配置响应头解决跨域问题

    // app.js中 var app = express(); /** 自定义中间件 */ var allowCrossDomain = function (req, res, next) {// 所 ...

  3. vue.config.js配置完代理还是提示跨域?

    哥,配置了代理之后,请求的url是向代理服务器发请求.请求的url的host和端口改一下,配置的时候如果设置了pathRewrite,也改改url.

  4. 基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册

    基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册 前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs ​ 官网下载地址:http ...

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

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

  6. vue+node.js+mysql项目搭建

    前言 用vue搭建前端页面.用node开发后端接口.数据库用mysql 可行性分析 缺点: nodejs单线程,不能做cpu密集型操作,导致时间片不能释放,阻塞后面的任务. nodejs可靠性比较低, ...

  7. vue+node.js前后端交互中的token令牌验证

    这篇文章分享一下本人学习vue+node.js前后端交互中的登录token令牌的心得 最近准备写一个个人博客网站,前端采用的是vue+element,后端用node.js 在做用户登录的时候就想到 如 ...

  8. boa支持https_Boa: 在 Node.js 中使用 Python

    Hello,大家好,有一段时间不见了. 这次主要给大家带来一个好东西,它的主要用途就是能让大家在 Node.js 中使用 Python 的接口和函数.可能你看到这里会好奇,会疑惑,会不解,我 Node ...

  9. node.js 创建服务器_Node.js HTTP软件包–创建HTTP服务器

    node.js 创建服务器 An HTTP server caters to client requests and sends appropriate response. For example, ...

最新文章

  1. jdk默认垃圾收集器
  2. UVa272-TeX中的引号
  3. CTF基本赛制与题型
  4. 人人都能学会的python编程教程1:第一行代码
  5. Android系统中用C语言来编写服务程序并且开机自启动运行服务
  6. jQuery插件开发详细教程
  7. Linux下定时切割nginx日志并删除指定天数前的日志记录
  8. Maven安装与配置(详细步骤)
  9. 华硕服务器 u盘安装系统,华硕电脑u盘安装系统教程
  10. oracle查找隐藏字符串,oracle chr(0) 隐藏字符串
  11. matlab 功率谱密度 汉宁窗_Matlab实例|频谱、功率谱和功率谱密度计算详解
  12. 搭建个人博客【搭建Hexo+Fluid博客并部署到GitHub/云服务器(阿里云/腾讯云)】
  13. 港澳台、内地身份证号校验规则
  14. 泥瓦匠聊并发编程:线程与多线程必知必会(基础篇)
  15. Camera360 一款强大的手机拍照必备软件
  16. 推送github报错“The remote end hung up unexpectedly”解决办法
  17. ANSYS Electronic各类
  18. 1.1 命题逻辑 笔记
  19. Wireless Power Tranmissions
  20. Caffe深度学习框架上手教程

热门文章

  1. Silverlight视频教程、资源下载。如果你觉得看图文不够形象,不够生动,那就看看视频吧。...
  2. 在当当买了python怎么下载源代码-Python爬取当当、京东、亚马逊图书信息代码实例...
  3. 基于python的游戏设计与实现-基于Python的飞机大战游戏系统设计与实现开题报告...
  4. 会python可以从事什么工作-Python入门后,想要从事自由职业可以做哪方面工作?...
  5. python推荐书籍-有哪些 Python 经典书籍?
  6. python数据类型-Python核心数据类型概览
  7. python书籍推荐知乎-python入门书籍(爬虫方面)有哪些推荐?
  8. python简单代码 春节集五福-我用 Python 集齐了五福
  9. python代码翻译-用python实现百度翻译的示例代码
  10. python教程第四版pdf下载-笨办法学python 第四版 中文pdf高清版