美文网首页
利用nginx解决本地项目AJAX跨域请求

利用nginx解决本地项目AJAX跨域请求

作者: 东京的雨不会淋湿首尔 | 来源:发表于2017-04-08 00:27 被阅读427次
     今天用sanic写前后端分离的项目时,用pycharm本地调试遇到ajax跨域问题。从网上搜索解决方案,用getJSON,jsonp,设置请求头等均达不到理想效果。最后,想到可以利用nginx反向代理来解决这个问题。

两个url只要协议、域名、端口有任何一个不同,都被当作是不同
的域,相互访问就会有跨域问题。

1.在pycharm中编写项目时,前端的url为

http://localhost:63342/Library/template/index.html

2.而我的后端请求地址为

http://localhost:8000/api/

3.解决这个问题,只要使页面的前缀和接口的前缀一致就可以了,因此可以使用nginx进行反向代理。打开nginx目录下的conf文件夹,在nginx.conf文件的配置如下

server {
        listen       80;
        server_name  localhost;

        location ^~ /library {
            alias E:/Document/python/sanicProject/Library/template;
            autoindex on;
            #add_header Access-Control-Allow-Origin "*";  
            #add_header Access-Control-Allow-Methods "POST, GET, PUT, OPTIONS, DELETE";  
            
        }
        location / {
    
            proxy_pass http://localhost:8000;
            #add_header Access-Control-Allow-Origin "*";
            add_header Access-Control-Allow-Methods "POST, GET, PUT, OPTIONS, DELETE";
        }
        
    }

4.重启nginx

nginx -s reload

5.现在应该访问正常了

相关文章

  • 利用nginx解决本地项目AJAX跨域请求

    今天用sanic写前后端分离的项目时,用pycharm本地调试遇到ajax跨域问题。从网上搜索解决方案,用ge...

  • ajax跨域请求

    ajax跨域请求(jsonp) 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案JSONP jQue...

  • webpack+vue+axios 环境下的跨域问题

    问题 在项目中向后端进行 ajax 请求时,出现游览器阻止跨域请求的问题。 引入 axios,并解决跨域 axio...

  • 前后端分离,shiro,跨域问题

    跨域问题是进行ajax请求时,js文件所在域名,与请求域名不一致,触发跨域限制。 解决思路是利用filter修改r...

  • 跨域

    什么是跨域? 为什么会发生ajax跨域?浏览器限制跨域【发出的请求不是本域】XHR请求【json】 解决思路:1:...

  • Node接口代理方案

    背景说明 前后端分离项目要解决的第一个问题前端本地开发如何解决ajax的跨域问题,一般情况下都是使用Nginx配置...

  • Nginx 允许多个域名跨域访问

    参考: Nginx 允许多个域名跨域访问 当浏览器发起ajax请求到其他域名时,会出现跨域的问题,在nginx上的...

  • 解决ajax跨域问题

    Jsonp解决ajax跨域问题 CORS解决ajax跨域问题

  • 跨域CORS

    CORS全称是跨域资源共享(Cross-Origin Resource Sharing),用来解决AJAX跨域请求...

  • 跨域产生的原因及解决办法

    1、跨域产生的原因及解决办法 2、JONP 与 ajax请求的区别 1⃣️请求方式不同: ajax请求Type...

网友评论

      本文标题:利用nginx解决本地项目AJAX跨域请求

      本文链接:https://www.haomeiwen.com/subject/oabkattx.html