在开发阶段一般都是前后端分离,然后通常前端不懂后端代码,后端不懂前端代码。那么怎么在不改代码的情况解决跨域问题。下面以php + vue的例子来说明下:
比如php使用 http://dev.yoururl.com的域名,一个写vue的前端开发的时候,本地是 http://localhost:9528的域名。那出现跨域问题,这个前端可以本地装个nginx,然后配置如下代理:
server {
listen 8888;
server_name localhost;
access_log logs/default.access.log;
error_log logs/default.error.log;
root html;
index index.html index.htm index.php;
## send request back to apache ##
location /api {
proxy_pass http://dev.yoururl.com/api;
#Proxy Settings
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
proxy_max_temp_file_size 0;
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_buffer_size 4k;
proxy_buffers 4 32k;
proxy_busy_buffers_size 64k;
proxy_temp_file_write_size 64k;
}
location / {
proxy_pass http://127.0.0.1:9528;
#Proxy Settings
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
proxy_max_temp_file_size 0;
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_buffer_size 4k;
proxy_buffers 4 32k;
proxy_busy_buffers_size 64k;
proxy_temp_file_write_size 64k;
}
}
注意:代理到vue的时候我用的 http://127.0.0.1:9528,至于为啥用127.0.0.1,是因为代理到localhost时候静态资源访问会超级慢。
重启nginx,然后就可以本地只用 http://localhost:8888这一个域名同时访问两个项目了。具体细节就不赘述了。