thinkPHP5.1跨域路由如何配置和vue开发环境如何解决跨域

朱雀 2022-01-09 15:09 714阅读 0赞

前言：项目是前后端分离项目，数据都是接口实现，在调用接口时，前端项目的dev环境跨域问题可以通过前端配置解决，生产环境却跨域。后端通过nginx代理转发也无法解决No ‘Access-Control-Allow-Origin’ header is present on the requested resource.  
我写的PHP+vue的demo [http://guobaxiong.gitee.io/vue-admin/\#/readme/main][http_guobaxiong.gitee.io_vue-admin_readme_main]

一、前端配置  
项目是基于vue-cli3  
打开vue-config.js，老项目是config/index.js文件  
修改如下：

devServer: {
            open: false, // 自动打开浏览器运行开关
            proxy: {
                '/weibo': {    //将www.exaple.com印射为/apis
                    target: 'http://api.com',  // 接口域名
                    secure: false,  // 如果是https接口，需要配置这个参数
                    changeOrigin: true,  //是否跨域
                    pathRewrite: {
                        '^/weibo': ''   //需要rewrite的,
                    }
                }
        },

当然.envdeveloment文件的VUE\_APP\_API\_BASE=’/api/test’ api修改成你接口的名称  
修改前：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE1OTU1NDIz_size_16_color_FFFFFF_t_70]  
重新本地编译运行后  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE1OTU1NDIz_size_16_color_FFFFFF_t_70 1]  
二、通过后端配置  
后端我使用的是thinkPHP5.1  
有三种方法可以解决接口路由跨域  
npm run build打包后模拟线上时跨域截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE1OTU1NDIz_size_16_color_FFFFFF_t_70 2]  
1.route目录下的route.php文件修改

//跨域路由后面加上allowCrossDomain()
    Route::rule('weibo/list','admin/wb.weibo/user_timeline_by_name')->allowCrossDomain(); //多级控制器路由配置写法demo

![在这里插入图片描述][20190621162005585.gif]  
2.注解路由跨域

/**
         * @route("weibo/list")->allowCrossDomain()
         */

![在这里插入图片描述][20190621162329915.gif]  
3.Google浏览器下载[Moesif Orign & CORS Change][Moesif Orign _ CORS Change]插件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE1OTU1NDIz_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][20190621162751540.gif]  
第三个方法只能自己在电脑上临时使用，真正解决的是前面的方法

[http_guobaxiong.gitee.io_vue-admin_readme_main]: http://guobaxiong.gitee.io/vue-admin/#/readme/main
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE1OTU1NDIz_size_16_color_FFFFFF_t_70]: /images/20220109/a6e9d8ff25c0449e869b71af3bca1bf5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE1OTU1NDIz_size_16_color_FFFFFF_t_70 1]: /images/20220109/2a5ea1b4bfb24e688813a6745bc66336.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE1OTU1NDIz_size_16_color_FFFFFF_t_70 2]: /images/20220109/788ddd33ea7a449eabcbd3fce6ba8ff4.png
[20190621162005585.gif]: /images/20220109/efda470ffa474137930a636440951cff.png
[20190621162329915.gif]: /images/20220109/40d5b2202def435fb70865d23509a0cb.png
[Moesif Orign _ CORS Change]: https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc?utm_source=chrome-ntp-icon
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE1OTU1NDIz_size_16_color_FFFFFF_t_70 3]: /images/20220109/371ed2b5bb554b98a4564fc7a7b3250a.png
[20190621162751540.gif]: /images/20220109/a94c939be1ab45a486aaa38eff9efb8c.png