在这里，我们将给大家分享关于Python|Flask解决跨域问题的知识，让您更了解flask跨域怎么解决的本质，同时也会涉及到如何更有效地AJAX跨域问题解决方法（2）——JSONP解决跨域、angu

在这里，我们将给大家分享关于Python | Flask 解决跨域问题的知识，让您更了解flask跨域怎么解决的本质，同时也会涉及到如何更有效地AJAX跨域问题解决方法（2）——JSONP解决跨域、angular解决跨域问题、Flask + Nginx + React + Webpack 配置解决跨域问题、Flask-Cors：Python web应用程序中解决跨域问题的内容。

• Python | Flask 解决跨域问题（flask跨域怎么解决）
• AJAX跨域问题解决方法（2）——JSONP解决跨域
• angular解决跨域问题
• Flask + Nginx + React + Webpack 配置解决跨域问题
• Flask-Cors：Python web应用程序中解决跨域问题

Python | Flask 解决跨域问题（flask跨域怎么解决）

系列文章目录

Table of Contents

• 系列文章目录
• 前言
• 使用步骤
  • 1. 引入库
  • 2. 配置
    • 1. 使用 CORS函数 配置全局路由
    • 2. 使用 @cross_origin 来配置单行路由
  • 配置参数说明
• 总结
• 参考

前言

我靠，又跨域了

使用步骤

1. 引入库

pip install flask-cors

2. 配置

flask-cors 有两种用法，一种为全局使用，一种对指定的路由使用

1. 使用 CORS函数 配置全局路由

from flask import Flask, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app, supports_credentials=True)

其中 CORS 提供了一些参数帮助我们定制一下操作。

常用的我们可以配置 origins、methods、allow_headers、supports_credentials

所有的配置项如下：

:param resources:
    The series of regular expression and (optionally) associated CORS
    options to be applied to the given resource path.

    If the argument is a dictionary, it''s keys must be regular expressions,
    and the values must be a dictionary of kwargs, identical to the kwargs
    of this function.

    If the argument is a list, it is expected to be a list of regular
    expressions, for which the app-wide configured options are applied.

    If the argument is a string, it is expected to be a regular expression
    for which the app-wide configured options are applied.

    Default : Match all and apply app-level configuration

:type resources: dict, iterable or string

:param origins:
    The origin, or list of origins to allow requests from.
    The origin(s) may be regular expressions, case-sensitive strings,
    or else an asterisk

    Default : ''*''
:type origins: list, string or regex

:param methods:
    The method or list of methods which the allowed origins are allowed to
    access for non-simple requests.

    Default : [GET, HEAD, POST, OPTIONS, PUT, PATCH, DELETE]
:type methods: list or string

:param expose_headers:
    The header or list which are safe to expose to the API of a CORS API
    specification.

    Default : None
:type expose_headers: list or string

:param allow_headers:
    The header or list of header field names which can be used when this
    resource is accessed by allowed origins. The header(s) may be regular
    expressions, case-sensitive strings, or else an asterisk.

    Default : ''*'', allow all headers
:type allow_headers: list, string or regex

:param supports_credentials:
    Allows users to make authenticated requests. If true, injects the
    `Access-Control-Allow-Credentials` header in responses. This allows
    cookies and credentials to be submitted across domains.

    :note: This option cannot be used in conjuction with a ''*'' origin

    Default : False
:type supports_credentials: bool

:param max_age:
    The maximum time for which this CORS request maybe cached. This value
    is set as the `Access-Control-Max-Age` header.

    Default : None
:type max_age: timedelta, integer, string or None

:param send_wildcard: If True, and the origins parameter is `*`, a wildcard
    `Access-Control-Allow-Origin` header is sent, rather than the
    request''s `Origin` header.

    Default : False
:type send_wildcard: bool

:param vary_header:
    If True, the header Vary: Origin will be returned as per the W3
    implementation guidelines.

    Setting this header when the `Access-Control-Allow-Origin` is
    dynamically generated (e.g. when there is more than one allowed
    origin, and an Origin than ''*'' is returned) informs CDNs and other
    caches that the CORS headers are dynamic, and cannot be cached.

    If False, the Vary header will never be injected or altered.

    Default : True
:type vary_header: bool

2. 使用 @cross_origin 来配置单行路由

from flask import Flask, request
from flask_cors import cross_origin

app = Flask(__name__)


@app.route(''/'')
@cross_origin(supports_credentials=True)
def hello():
    name = request.args.get("name", "World")
    return f''Hello, {name}!''

其中 cross_origin 和 CORS 提供一些基本相同的参数。

常用的我们可以配置 origins、methods、allow_headers、supports_credentials

所有的配置项如下：

:param origins:
    The origin, or list of origins to allow requests from.
    The origin(s) may be regular expressions, case-sensitive strings,
    or else an asterisk

    Default : ''*''
:type origins: list, string or regex

:param methods:
    The method or list of methods which the allowed origins are allowed to
    access for non-simple requests.

    Default : [GET, HEAD, POST, OPTIONS, PUT, PATCH, DELETE]
:type methods: list or string

:param expose_headers:
    The header or list which are safe to expose to the API of a CORS API
    specification.

    Default : None
:type expose_headers: list or string

:param allow_headers:
    The header or list of header field names which can be used when this
    resource is accessed by allowed origins. The header(s) may be regular
    expressions, case-sensitive strings, or else an asterisk.

    Default : ''*'', allow all headers
:type allow_headers: list, string or regex

:param supports_credentials:
    Allows users to make authenticated requests. If true, injects the
    `Access-Control-Allow-Credentials` header in responses. This allows
    cookies and credentials to be submitted across domains.

    :note: This option cannot be used in conjuction with a ''*'' origin

    Default : False
:type supports_credentials: bool

:param max_age:
    The maximum time for which this CORS request maybe cached. This value
    is set as the `Access-Control-Max-Age` header.

    Default : None
:type max_age: timedelta, integer, string or None

:param send_wildcard: If True, and the origins parameter is `*`, a wildcard
    `Access-Control-Allow-Origin` header is sent, rather than the
    request''s `Origin` header.

    Default : False
:type send_wildcard: bool

:param vary_header:
    If True, the header Vary: Origin will be returned as per the W3
    implementation guidelines.

    Setting this header when the `Access-Control-Allow-Origin` is
    dynamically generated (e.g. when there is more than one allowed
    origin, and an Origin than ''*'' is returned) informs CDNs and other
    caches that the CORS headers are dynamic, and cannot be cached.

    If False, the Vary header will never be injected or altered.

    Default : True
:type vary_header: bool

:param automatic_options:
    Only applies to the `cross_origin` decorator. If True, Flask-CORS will
    override Flask''s default OPTIONS handling to return CORS headers for
    OPTIONS requests.

    Default : True
:type automatic_options: bool

配置参数说明

总结

在 flask 的跨域配置中，我们可以使用 flask-cors 来进行配置，其中 CORS 函数 用来做全局的配置，@cross_origin 来实现特定路由的配置

参考

• https://flask-cors.readthedocs.io/en/latest/

AJAX跨域问题解决方法（2）——JSONP解决跨域

JSONP是什么？
JSON全称为JSON with Padding，是JSON的一种补充的使用方式，不是官方协议。

使用JSONP服务器后台要改动吗？
JSONP不同于一般的ajax请求返回json对象，JSONP返回的是script脚本。
所以，使用JSONP时，服务器后台需要进行改动，如果依然返回的是json对象，则会报错。

JSONP解决跨域的实现原理
浏览器只对XHR进行跨域问题校验，而JSONP的类型是script，所以可以回避跨域校验。
JSONP通过创建一个动态的script脚本，在script中把请求发出去。
注：请求后跟着一个下划线，是防止请求被缓存，如果允许缓存，则可以在ajax请求中加上cache: true

JSONP有什么弊端？
1.服务器需要改动代码支持
2.只支持get
3.发送的是script，不是XHR

综上所述：JSONP依然不是解决跨域最好的方法。

angular解决跨域问题

{
    "/": {
        "target": "",//要指向的域名或端口号
        "logLevel": "debug",//
        "secure": false,//
        "changeOrigin": true,//
        "pathRewrite": {
            "^/": ""
        }
    }
}

{
      "projects": {
        "my-app": {
          "architect": {
            "serve": {
              "builder": "@angular-devkit/build-angular:dev-server","options": {
                "browserTarget": "my-app:build""proxyConfig": "proxy.config.json"
              },"configurations": {
                "production": {
                  "browserTarget": "my-app:build:production"
                }
              }
            }
          }
        }
      }
    }
}

{
    "name": "my-app": {
        "ng": "ng""start": "ng serve --proxy-config proxy-config.json"
    }
}

...
<script src="//localhost:8080/asserts/bundle.js"></script>
...

const url = "http://localhost:8080"

module.exports = {
    output: {
        filename: ''[name].js'',
        path: path.resolve(__dirname, ''dist''),
        publicPath: `${url}/asserts/`,
    },
    devServer: {
        port: 8080,
        compress: true,
        hot: true,
        historyApiFallback: true,
        contentBase: path.join(__dirname, "dist"),
        publicPath: `${url}/asserts/`,
    }
    ...
}

server {
    listen 80;
    server_name localhost; 
    location / {
        # flask 代理
        proxy_pass http://127.0.0.1:5000;
    }

    location /asserts/ {
        # webpack-dev-server 代理
        proxy_pass http://127.0.0.1:8080/asserts/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        error_page 502 @start-webpack-dev-server;
    }

    location @start-webpack-dev-server {
        default_type text/plain;
        return 502 "Please start the webpack-dev-server first.";
    }
}

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)

# 允许跨域请求
CORS(app, resources=r''/*'')

# 路由
@app.route(''/'')
def index():
    return jsonify(message=''Hello World!'')

# 启动服务器
if __name__ == ''__main__'':
    app.run()

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)

# 设置只支持GET、HEAD和OPTIONS方法的跨域请求
cors = CORS(app, resources={r''/api/*'': {''origins'': ''*''}, ''methods'': [''GET'', ''HEAD'', ''OPTIONS'']})

# 路由
@app.route(''/api/test'', methods=[''GET''])
def test():
    return jsonify(message=''Success!'')

# 启动服务器
if __name__ == ''__main__'':
    app.run()