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

今天用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.现在应该访问正常了

参考：

https://www.jianshu.com/p/c17a8bc27776

https://segmentfault.com/a/1190000012469713