在學(xué)習(xí)的過(guò)程柱嫌，遇到react 項(xiàng)目axios訪問(wèn)后臺(tái)springboot項(xiàng)目谒养，發(fā)現(xiàn)404 跨域問(wèn)題游岳。
其中涉及到的方法有：
1沥潭、webpack.config.js文件用設(shè)置代理proxy邀泉；
2、直接在springboot項(xiàng)目的Controller文件加入注解@CrossOrigin钝鸽，前端請(qǐng)求中直接寫入后臺(tái)的uri
3汇恤、把react項(xiàng)目部署到 nginx 服務(wù)器上.
以前自己查找方法的時(shí)候，總是抱怨別人的寫的不詳細(xì)拔恰，但是真正 自己寫技術(shù)文章的時(shí)候因谎，才發(fā)現(xiàn)有時(shí)候真的想簡(jiǎn)單點(diǎn)，而且有時(shí)也考慮的比較少颜懊，多多包涵财岔。
axios:對(duì)應(yīng)的文檔可以到github 搜索axios .地址：https://github.com/search?q=axios，第一個(gè)就是河爹，進(jìn)去里面就是axios的安裝以及用法

axios.png

好了 下面將分別說(shuō)一下對(duì)應(yīng)的方法：
1匠璧、設(shè)置代理proxy，在webpack.config.js文件修改devServer

var host = '192.168.**.***';
...
devServer: {
        hot: true,
    host: host,
        compress: true,
        port: 3457,
        historyApiFallback: true,
        contentBase: path.resolve(__dirname),
        publicPath: '/build/',
        proxy: {
            "/api/*": {
                //host 即為你后臺(tái)springboot的地址 8083對(duì)應(yīng)的端口號(hào)
                target: `http://{host}:8083/`,  
                secure: false,
                changeOrigin: true,
                // 前端請(qǐng)求uri:api/user  解析出來(lái)的結(jié)果就是http://{host}:8083/user  即去掉api前綴
                pathRewrite: { '^/api': '' }
            }
        },
        stats: {
            modules: false,
            chunks: false
        },
    },

前端的訪問(wèn)：

axios.post('/api/t-test/getTtestById', 
        querystring.stringify({
            id: '42',
            lastName: '你好'
          })
          )
          .then(function (response) {
            console.log("打印跨域返回?cái)?shù)據(jù)："+JSON.stringify(response.data));
          })
          .catch(function (error) {
            console.log(error);
          });

2咸这、通過(guò)注解的方式@CrossOrigin
在對(duì)應(yīng)的Controller文件上增加@CrossOrigin 夷恍，也可以單獨(dú)對(duì)需要跨域的方法增加注解

...
@CrossOrigin
@Controller
@RequestMapping("/t-test")
public class TTestController {
...

前端訪問(wèn)的方式

TestKuayu = () =>{
        console.log("測(cè)試跨域問(wèn)題！");
        //直接把springboot項(xiàng)目的uri寫入請(qǐng)求中炊苫，如果不想每次都寫裁厅，可以把uri封裝到一個(gè)變量中
        axios.post('http://localhost:8989/t-test/getTtestById', 
        querystring.stringify({
            id: '42',
            lastName: '你好'
          })
          )
          .then(function (response) {
            console.log("打印跨域數(shù)據(jù)："+JSON.stringify(response.data));
          })
          .catch(function (error) {
            console.log(error);
          });

    }

3.部署到nginx 服務(wù)器冰沙，詳細(xì)講這個(gè)吧

（1）首先安裝nginx 官網(wǎng)：http://nginx.org/

微信截圖_20190402163648.png

nginx版本.png

nginx會(huì)話.png

任務(wù)管理器.png

build.png

builds.png

把這里的文件都復(fù)制到nginx的安裝目錄下的html文件夾里面

nginx_html.png

注意：修改nginx 目錄 conf文件夾下nginx.conf 可以用sublime text打開 也可以用文本文件等等唠梨。。

修改 http 下sever:

...
server {
        listen       8800;  #代理的端口
        server_name  localhost;  #代理的地址

        #root:D:\react\reactdemo\reactdemo01\build;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;          # 默認(rèn)的入口文件
            index  index.html index.htm;
        }

        location /api/ {          # /api 代理到下面 地址  就是修改成你后臺(tái)的uri
            proxy_pass http://192.168.*.*:8989/;
        }
....

修改了配置 文件 記得要重啟一起nginx : nginx -s reload

react 測(cè)試 貼出部分代碼

<button onClick={this.TestKuayu}>測(cè)試跨域問(wèn)題</button>

TestKuayu = () =>{
        
        console.log("測(cè)試跨域問(wèn)題侥啤！");
        axios.post('/api/t-test/getTtestById', 
        querystring.stringify({
            id: '42',
            lastName: '你好'
          })
          )
          .then(function (response) {
            console.log("打印nginx跨域："+JSON.stringify(response.data));
          })
          .catch(function (error) {
            console.log(error);
          });

    }

nginx部署目錄.png

后臺(tái).png

r.png

rs.png

至此全部完成当叭，有什么不正確的茬故，可以指出一起交流。
ly_dv 一個(gè)小菜鳥