やりたかった事
- FEとBEを合わせてソース管理
- BE(Python)をVSCodeでデバッグ実行できるようにする
- FE(JavaScript)はVSCodeからLiveServerで実行できて、BEとの送受信もできるようにする
フォルダ構成
フォルダ構成はFEとBEが同列にあり、それぞれに、JavaScirpt/Vue、Pythonのコードがあります。
また、親フォルダは、Eドライブにあります。
親フォルダ(Github管理)
├─.vscode
├─be
│ ├─App
│ │ └─AppA
│ ├─Function
│ │ └─Common
│ └─Log
│
└─fe
├─Common
├─css
├─icon
├─images
├─lib
│ └─jquery
└─AppA
設定方法
BEフォルダをXAMPP配下へ
BEのソースはWindows上のApache、XAMPP環境で動作させる必要があるため、
C:\xampp\cgi-bin配下に置きたい。
そのため、管理者権限で下記をコマンドライン実行し、リンクを張る事で、ソース格納場所の内容変更したものが、サーバのcgi-binフォルダに反映される形となります。
mklink /D C:\xampp\cgi-bin\Python E:\Work\MyRepository\ProjectName\cgi-bin でシンボリックリンクを許可
httpd.conf の、下記箇所を変更
<Directory "C:/xampp/cgi-bin">
AllowOverride All
Options +ExecCGI +FollowSymLinks
Require all granted
</Directory>この設定をしないと、
AH00037: Symbolic link not allowed or link target not accessible:＊＊＊
のようなエラーが発生します。
AllowHeaderの許可
ここが、かなり苦労しました。
結果からいうと、
httpd-vhosts.conf （C:\xampp\apache\conf\extra\）に下記を追記する事で、preflight処理が動作して、CORSエラーが発生しなくなりました。
<VirtualHost *:80>
ServerName localhost
DocumentRoot "C:/xampp/htdocs"
# DocumentRoot への CORS
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "GET, POST, OPTIONS"
Header always set Access-Control-Allow-Headers "Content-Type, X-Requested-With, If-Modified-Since"
# CGI ディレクトリにも CORS を適用
<Directory "C:/xampp/cgi-bin">
Options +ExecCGI
Require all granted
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "GET, POST, OPTIONS"
Header always set Access-Control-Allow-Headers "Content-Type, X-Requested-With, If-Modified-Since, cache-control, pragma"
</Directory>
</VirtualHost>
途中、生成AIに相談すると、httpd.confに下記を追加する事、
Header always set Access-Control-Allow-Headers “*”
というアドバイスや、
Header always set Access-Control-Allow-Headers “If-Modified-Since, cache-control, pragma”
を設定する事、等ありましたが、結局、LiveServerからの動作時には、vhost（バーチャルホスト）としての設定が必要でした。
※FEとBEの違いは下記を参考
コメント