跨域Access-Control-Allow-Origin怎么在不改代码的情况下解决

在开发阶段一般都是前后端分离,然后通常前端不懂后端代码,后端不懂前端代码。那么怎么在不改代码的情况解决跨域问题。下面以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这一个域名同时访问两个项目了。具体细节就不赘述了。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值