python3 tornado api + angular8 + nginx 跨域问题

问题

上一个博客部署好了api之后,前端开始吊发现了跨域的问题。

接口地址

http://111.231.201.164/api/houses  服务器上使用的是nginx转发

数据

前端angular请求

this.http.get(‘http://111.231.201.164/api/houses‘).subscribe((res: any) => {
      console.log(res);
});

目前测试用的Google 和 Firefox两个。

Google  浏览器

需要注意的事我的Google浏览器已经配置过跨域,就是说服务器的代码无论可不可以跨域我的浏览器都可以访问api。

此时还没在后台或者nginx配置跨域。

Firefox  浏览器

而Firefox还是一如既往跨域问题

 解决过程

1、我先是配置的tornado,虽然没有鸟用

这是网上大部分的教程,都是如此说的,但是却没有起作用。

class BaseHandler(tornado.web.RequestHandler):
    # blog.csdn.net/moshowgame 解决跨域问题
    def set_default_headers(self):
        self.set_header("Access-Control-Allow-Origin", "*") # 这个地方可以写域名
        self.set_header("Access-Control-Allow-Headers", "token")
        self.set_header(‘Access-Control-Allow-Methods‘, ‘POST, GET, OPTIONS‘)
        self.set_header(‘Access-Control-Allow-Credentials‘, ‘true‘)

    def write(self, chunk):
        self.set_header(‘Access-Control-Allow-Origin‘, ‘*‘)
        super(BaseHandler, self).write(chunk)

class MainHandler(BaseHandler):
    @decoratore
    def get(self):
        self.write("Hello, World")
# 访问: http://localhost:8888/story/sishen232

# 显示:U get story id is sishen232

class HouseHandler(BaseHandler):
    ‘‘‘house class‘‘‘

    def __init__(self, application, request):
        ‘‘‘必填参数‘‘‘
        super().__init__(application, request)
        # 预处理
        self.data = ByteData(self.request.arguments)
        self.params = [‘title‘, ‘position‘, ‘size‘, ‘address‘]

    @decoratore
    def post(self):
        ‘‘‘提交House接口‘‘‘
        # # 判断提交参数是否有误
        # if((‘title‘ not in raw_data) or (‘position‘ not in raw_data)):
        #     self.write(json.dumps(
        #         {"false": {"msg": ‘参数错误‘}}, ensure_ascii=False))
        #     return
        code = paramsCheck(self.data,  self.params)
        if code == 1:
            raw_data = self.data
            if(‘year‘ not in raw_data):
                raw_data[‘year‘] = ‘‘
            print(raw_data)
            data = self.application.db.execute(
                "insert into house(title, position, size, address, year) values(‘{}‘, ‘{}‘, {}, ‘{}‘, ‘{}‘)".format(raw_data[‘title‘], raw_data[‘position‘], float(raw_data[‘size‘]), raw_data[‘address‘], raw_data[‘year‘]))
            # self.write(json.dumps({"sum": s}))
            self.write(json.dumps(
                {"success": {"msg": ‘添加成功‘}}, ensure_ascii=False))
        else:
            self.write(json.dumps(
                {"false": {"msg": ‘参数错误‘}}, ensure_ascii=False))

    def get(self, House_id=‘‘):
        ‘‘‘
            # 获取House接口
            # House_id 存在则获取该条数据,不存在获取所有数据
        ‘‘‘
        sql = ‘select * from house‘ if House_id == ‘‘ else ‘select * from house where id = {id}‘.format(
            id=House_id)
        data = self.application.db.query(sql)
        # self.write(json.dumps({"sum": s}))
        self.write(json.dumps(
            {"success": {"msg": ‘获取成功‘, "data": data}}, ensure_ascii=False))

2、nginx配置

方法1没有起作用的话,那多半就是转发出的问题。

location /api/{
        allow 111.231.201.164;
        proxy_pass_header Server;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Scheme $scheme;
        proxy_pass http://127.0.0.1:8888/;
     ## 跨域
        if ($request_method = ‘OPTIONS‘) {
            add_header ‘Access-Control-Allow-Origin‘ ‘*‘;
            add_header ‘Access-Control-Allow-Methods‘ "GET, POST, PUT, DELETE, PATCH, OPTIONS";
            add_header ‘Access-Control-Allow-Headers‘ "token";
            return 200;
        }
    }

修改之后重启nginx。

Google浏览器

还是一样ok

Firefox 浏览器

也请求到了

到此跨域问题解决。

class BaseHandler(tornado.web.RequestHandler):

# blog.csdn.net/m

oshowgame 解决跨域问题

def set_default_headers(self):

self.set_header("Access-Control-Allow-Origin", "*") # 这个地方可以写域名

self.set_header("Access-Control-Allow-Headers", "token")

self.set_header(‘Access-Control-Allow-Methods‘, ‘POST, GET, OPTIONS‘)

self.set_header(‘Access-Control-Allow-Credentials‘, ‘true‘)

def write(self, chunk):

self.set_header(‘Access-Control-Allow-Origin‘, ‘*‘)

super(BaseHandler, self).write(chunk)

class MainHandler(BaseHandler):

@decoratore

def get(self):

self.write("Hello, World")

# 访问: http://localhost:8888/story/sishen232

# 显示:U get story id is sishen232

class HouseHandler(BaseHandler):

‘‘‘house class‘‘‘

def __init__(self, application, request):

‘‘‘必填参数‘‘‘

super().__init__(application, request)

# 预处理

self.data = ByteData(self.request.arguments)

self.params = [‘title‘, ‘position‘, ‘size‘, ‘address‘]

@decoratore

def post(self):

‘‘‘提交House接口‘‘‘

# # 判断提交参数是否有误

# if((‘title‘ not in raw_data) or (‘position‘ not in raw_data)):

#     self.write(json.dumps(

#         {"false": {"msg": ‘参数错误‘}}, ensure_ascii=False))

#     return

code = paramsCheck(self.data,  self.params)

if code == 1:

raw_data = self.data

if(‘year‘ not in raw_data):

raw_data[‘year‘] = ‘‘

print(raw_data)

data = self.application.db.execute(

"insert into house(title, position, size, address, year) values(‘{}‘, ‘{}‘, {}, ‘{}‘, ‘{}‘)".format(raw_data[‘title‘], raw_data[‘position‘], float(raw_data[‘size‘]), raw_data[‘address‘], raw_data[‘year‘]))

# self.write(json.dumps({"sum": s}))

self.write(json.dumps(

{"success": {"msg": ‘添加成功‘}}, ensure_ascii=False))

else:

self.write(json.dumps(

{"false": {"msg": ‘参数错误‘}}, ensure_ascii=False))

def get(self, House_id=‘‘):

‘‘‘

# 获取House接口

# House_id 存在则获取该条数据,不存在获取所有数据

‘‘‘

sql = ‘select * from house‘ if House_id == ‘‘ else ‘select * from house where id = {id}‘.format(

id=House_id)

data = self.application.db.query(sql)

# self.write(json.dumps({"sum": s}))

self.write(json.dumps(

{"success": {"msg": ‘获取成功‘, "data": data}}, ensure_ascii=False))

原文地址:https://www.cnblogs.com/shuangzikun/p/12021788.html

时间: 2024-10-09 20:15:59

python3 tornado api + angular8 + nginx 跨域问题的相关文章

nginx跨域了解与模拟与解决

模拟由于跨域访问导致的浏览器报错,在nginx代理服务器上设置相应参数解决 nginx 跨域一.同源策略何为同源:1.协议(http/https)相同2.域名(IP)相同3.端口相同 浏览器遵循同源策略的目的同源策略的目的是为了保证用户信息的安全,防止恶意的网站窃取数据.此策略可以防止一个页面的恶意脚本(JavaScript语言编写的程序)通过该页面的文档对象模型来访问另一网页上的敏感数据. 同源策略是必需的,否则cookie可以共享,互联网就毫无安全可言,同源策略仅适用于JavaScript脚

学习-【前端】-关于nginx跨域的配置

一般来说我们的网站都是要使用代理服务器来分配不同端口,这里就nginx介绍,我们的混合app需要用到跨域的设置来完成数据交互,那么这里给出nginx跨域设置,当然,这里设置完本身后台服务器也要设置哦. location ^~/abc { add_header "Access-Control-Allow-Origin"  ""; add_header "Access-Control-Allow-Headers"  "Content-Typ

ahjesus 让我的MVC web API支持JsonP跨域

无数被跨域请求爆出翔来的人 遇到请求成功却不能进入success 总是提示parsererror 参考一下两篇文章吧 参考文章http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api and http://diaosbook.com/Post/2013/12/27/tips-for-aspnet-webapi-cors ahjesus 让我的MVC web API支持JsonP跨域

nginx 跨域acl

nginx跨域访问配置,需要配置多个源域名,有简单的方法,但不安全: add_header "Access-Control-Allow-Origin" * 以下是我的配置: <--------nginx config----------->                 if ( $http_origin ~* (https?://(.+\.)?(youyuan|uyuan)\.(.*)$) ) {                           add_header

nginx跨域设置

nginx跨域问题例子:访问http://10.0.0.10/ 需要能实现跨域 操作:http://10.0.0.10/项目是部署在tomcat里面,tomcat跨域暂时还不会,按照网上的方法操作也没成功只有用Nginx做个代理,解决跨域问题了! 1.将www.tangxiaoyue.com域名指向http://10.0.0.11/.只有在域名上设置才能实现跨域.(10.0.0.11是Nginx的IP)2.在nginx上的配置文件tang.conf进行设置 配置文件例如: server { li

Api之Cors跨域以及其他跨域方式

Web Api之Cors跨域以及其他跨域方式(三) 我们知道ajax不能跨域访问,但是有时我们确实需要跨域访问获取数据,所以JSONP就此诞生了,其本质使用的是Script标签,除JSONP以外还有另外实现跨域方式 一.手动实现JSONP跨域 1.首先创建一个Web项目,在这里我使用一般处理程序 1 public class Demo : IHttpHandler 2 { 3 public void ProcessRequest(HttpContext context) 4 { 5 //接收参数

Nginx跨域问题

Nginx跨域无法访问,通常报错: Failed to load http://172.18.6.30:8086/CityServlet: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://test.dingkailinux.cn' is therefore not allowed access. 可以在nginx的配置文件中对应的localtion中添加: a

Nginx跨域访问问题总结

一.什么是跨域 简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象. 同源是指相同的协议.域名.端口.特别注意两点: 如果是协议和端口造成的跨域问题"前台"是无能为力的, 在跨域问题上,域仅仅是通过"协议+域名+端口"来识别,两个不同的域名即便指向同一个ip地址,也是跨域的. 二.常见跨域情况 URL                                说明            

Nginx 跨域设置

web应用通常会碰到跨域的问题,特别是在将字体文件放在另一个域名下(cdn缓存)的时候会出现无法访问的问题,浏览器会报如下错误警告: Font from origin 'http://cdn.xxxx.com' has been blocked from loading by Cross-Origin Resource Sharing policy:  No 'Access-Control-Allow-Origin' header is present on the requested reso