devServer配置后解决前端跨域问题

最新推荐文章于 2024-08-07 23:48:41 发布

百度一下吧

最新推荐文章于 2024-08-07 23:48:41 发布

阅读量999

点赞数

分类专栏：前端 bug 文章标签：前端跨域

本文链接：https://blog.csdn.net/qq_45393395/article/details/125480945

版权

前端同时被 2 个专栏收录

37 篇文章 1 订阅

订阅专栏

bug

1 篇文章 0 订阅

订阅专栏

本文展示了如何配置前端的devServer代理以实现与后端API的通信。通过设置proxy，将'/api'路径指向本地服务器，实现了跨域请求。前端使用axios库发起GET请求，后端使用PHP响应，输出请求头信息及JSON数据。changeOrigin选项通常用于处理跨域问题。

摘要由CSDN通过智能技术生成

   devServer: {
        // host: '0.0.0.0',
        host: 'localhost',
        hot: true,
        port: 3000,
        open: true,
        historyApiFallback: true,
        https: false,
        proxy: {
            '/api': {
              target: 'http://127.0.0.1:80', // Server
            //   changeOrigin: true,
              pathRewrite: {'^/api': ''}
            },
          }
    },

前端代码：

import axios from "axios";
axios.get('/api/jsonp.php?')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });

<?php
// header('Content-type: application/json');
//获取回调函数名
// $callBack = htmlspecialchars($_REQUEST ['callBack']);
//json数据

$header = apache_request_headers();

foreach ($header as $headers => $value) {

echo "$headers: $value '\n'";

}
$arr = '["hello","hi"]';
//输出jsonp格式的数据
// echo $callBack . "(" . $arr . ")"+<br />';
echo $arr;
?>

后端代码：

changeOrigin可以改变服务器获取host地址