利用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