手机端测试html js代码可以运行 但是一旦发送axios请求 无法正常使用

这可能是由于你的axios请求受到了浏览器的跨域限制。浏览器通常会阻止跨域请求，以确保安全性。你可以通过以下方法解决这个问题：

1. 在后端设置允许跨域请求的响应头
在你的后端代码中，可以在响应头中添加以下内容，以允许跨域请求：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization

其中 `Access-Control-Allow-Origin: *` 表示允许任何来源的请求，你也可以设置为具体的域名。

2. 使用代理
你也可以使用代理来发送请求，将前端发送的请求发送到同域的后端，再由后端发送请求到目标服务器。这样就可以避免跨域请求的限制。

3. 使用JSONP
如果你只需要发送 GET 请求，你可以使用 JSONP 来解决跨域问题。JSONP 是一种利用 script 标签可以跨域访问的特性来实现的跨域请求方式。

希望以上方法中的其中一种可以帮助你解决问题。

相关问题

这是一个前后端分离的项目 前端用的是Vue框架 后端用的是java 现在的场景是有A和B两端 A端向B端发送请求的时候 会在请求的末尾添加上密钥和当前的时间戳 并且该请求是一个post请求需要请求体 请求体里有具体的信息 比如手机号商户号 A端需要根据密钥和请求体里的信息在前端根据特定的规则生成一个签名发送到B端 B端在接收到请求的时候会使用filter 需要根据相同的规则验证签名是否一致 否则过滤掉该请求 请将上述场景 利用代码实现

以下是一个简单的实现示例，仅供参考：

前端代码：

import axios from 'axios';
import md5 from 'md5';

const secretKey = 'your_secret_key'; // 密钥

function generateSignature(params) {
  const sortedParams = Object.keys(params).sort().map(key => `${key}=${params[key]}`).join('&');
  const timestamp = Date.now();
  const signature = md5(`${sortedParams}&${timestamp}&${secretKey}`);
  return { signature, timestamp };
}

function post(url, data) {
  const { signature, timestamp } = generateSignature(data);
  return axios.post(url, data, {
    headers: {
      'X-Signature': signature,
      'X-Timestamp': timestamp,
    },
  });
}

// 使用示例
post('/api/submit', {
  mobile: '123456789',
  merchantId: 'abc123',
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});

后端代码：

import java.io.IOException;
import java.util.Arrays;
import java.util.Map;
import java.util.stream.Collectors;

import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.web.filter.GenericFilterBean;

public class SignatureFilter extends GenericFilterBean {

  private String secretKey = "your_secret_key"; // 密钥

  public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
      throws IOException, ServletException {
    HttpServletRequest request = (HttpServletRequest) req;
    HttpServletResponse response = (HttpServletResponse) res;

    String signature = request.getHeader("X-Signature");
    String timestamp = request.getHeader("X-Timestamp");
    if (signature == null || timestamp == null) {
      response.setStatus(HttpServletResponse.SC_BAD_REQUEST);
      return;
    }

    Map<String, String[]> parameterMap = request.getParameterMap();
    String sortedParams = Arrays.stream(parameterMap.keySet().toArray(new String[0]))
        .sorted().map(key -> key + "=" + parameterMap.get(key)[0]).collect(Collectors.joining("&"));
    String expectedSignature = md5(sortedParams + "&" + timestamp + "&" + secretKey);

    if (!expectedSignature.equals(signature)) {
      response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
      return;
    }

    chain.doFilter(request, response);
  }

  private String md5(String text) {
    // TODO: 计算 MD5 值
    return null;
  }

}

以上代码仅为示例，具体实现可能需要根据实际情况进行调整和优化。

使用vue实现一个手机端外卖饿了么app并且展示代码

这是一个比较大的项目，涉及到很多知识点，包括但不限于Vue框架、Vue Router、Vuex、Axios、ElementUI等。以下是一个简单的实现外卖饿了么app的示例代码：

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

router.js

import Vue from "vue";
import Router from "vue-router";

import Home from "./views/Home.vue";
import Cart from "./views/Cart.vue";
import Profile from "./views/Profile.vue";
import Search from "./views/Search.vue";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      name: "home",
      component: Home,
    },
    {
      path: "/cart",
      name: "cart",
      component: Cart,
    },
    {
      path: "/profile",
      name: "profile",
      component: Profile,
    },
    {
      path: "/search",
      name: "search",
      component: Search,
    },
  ],
});

Home.vue

<template>
  <div class="home">
    <h1>Home Page</h1>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<style>
.home {
  padding: 20px;
}
</style>

Cart.vue

<template>
  <div class="cart">
    <h1>Cart Page</h1>
  </div>
</template>

<script>
export default {
  name: "Cart",
};
</script>

<style>
.cart {
  padding: 20px;
}
</style>

Profile.vue

<template>
  <div class="profile">
    <h1>Profile Page</h1>
  </div>
</template>

<script>
export default {
  name: "Profile",
};
</script>

<style>
.profile {
  padding: 20px;
}
</style>

Search.vue

<template>
  <div class="search">
    <h1>Search Page</h1>
  </div>
</template>

<script>
export default {
  name: "Search",
};
</script>

<style>
.search {
  padding: 20px;
}
</style>

以上代码只是一个简单的示例，还需要自行添加代码实现功能，比如登录、注册、商品列表、购物车等。同时，还需要使用Mock数据模拟后端接口数据，使用Axios库进行数据请求。如果需要实现更多功能，还需要使用Vuex进行状态管理。