问题解决:跨域访问错误

今天做前端页面渲染的时候遇到一个问题,

因为我使用的wsl开发,windows直接访问不了wsl中的文件,还要改其他配置没成功,索性就不改了,粘贴在桌面上用浏览器打开调试

然后所有使用apifox通过测试的路径全部报错

Ensure CORS response header values are valid
A cross-origin resource sharing (CORS) request was blocked because of invalid or missing response headers of the request or the associated preflight request .
To fix this issue, ensure the response to the CORS request and/or the associated preflight request are not missing headers and use valid header values.
Note that if an opaque response is sufficient, the request's mode can be set to no-cors to fetch the resource with CORS disabled; that way CORS headers are not required but the response content is inaccessible (opaque

这个错误主要是因为跨域访问导致的

什么是跨域访问

跨域访问报错的原理是浏览器的同源策略(Same-Origin Policy)。同源策略是一种安全策略,指浏览器允许在同一域名下的页面间相互访问,但禁止跨域名访问。

跨域访问的问题通常出现在客户端的 JavaScript 代码中,当 JavaScript 代码向另一个域名的服务器发起请求时,如果该域名与当前域名不同,则会触发跨域访问错误。因为浏览器出于安全考虑,不允许通过 XMLHttpRequest 或 Fetch API 发送跨域请求,除非响应中包含正确的跨域头信息(CORS)。

在服务器上的 HTML 文件也可能遇到跨域问题。比如,如果 HTML 文件中包含了从不同域名加载的资源,比如图片、CSS 或 JavaScript 文件,如果服务器未正确设置跨域头信息,那么这些资源的请求也可能会被浏览器拦截。

通常情况下,在服务器端设置正确的跨域头信息(CORS)可以解决跨域问题。同时,也可以使用 JSONP、代理、WebSocket 等技术绕过浏览器的同源策略。

简单来说就是我在我的桌面的html文件中有访问wsl的域名,然后两个域名不一样,就会触发保护机制,如果这时你的服务端没有添加跨域的许可(对我来说就是添加桌面的html可以访问路径的许可),就会找不到路径返回404

问题解决,

  1. 第一就是不要跨域,两个域名相同(localhost或者127.0.0.1什么的),安全一点

  2. 第二个方法就是,添加许可,对头部信息进行设置(请求与相应都要进行设置,不然要么请求不了,要么收不到相应)

  • 请求:

我们可以使用一个中间件函数来处理跨域的验证,因为如果跨域,浏览器要先发送一个请求方法为: OPTIONS的请求来判断,需要返回一个200才会发送剩下的请求,使用我们定义跨域访问许可中间件函数

// 允许跨域访问中间件
func Dfot() gee7.HandlerFunc {
 return func(ctx *gee7.Context) {
  // 处理预检请求
  if ctx.Req.Method == "OPTIONS" {
   // 验证预检请求的来源、头部字段和请求方法是否符合预期
   // ...

   // 设置响应头部字段
   ctx.Writer.Header().Set("Access-Control-Allow-Origin""*")
   ctx.Writer.Header().Set("Access-Control-Allow-Methods""POST, GET, OPTIONS")
   ctx.Writer.Header().Set("Access-Control-Allow-Headers""Content-Type")

   // 返回状态码 200 和空响应体
   ctx.Writer.WriteHeader(http.StatusOK)
   return
  }
 }
}

我这里ctx.Writer.Header().Set("Access-Control-Allow-Origin"使用的"*"表示所有跨域路径都可以访问,为了安全起见生产环境不建议这样用

  • 相应:

在相应的时候在setheader函数中添加允许跨域访问的路径(我这里嫌麻烦还是用的*)

func (c *Context) SetHeader(key string, value string) {
 c.Writer.Header().Set("Access-Control-Allow-Origin""*")
 c.Writer.Header().Set(key, value)
}

这样就解决跨域访问的的错误了

本文由 mdnice 多平台发布

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: vue.js 是一个开源的 JavaScript 框架,用于构建用户界面,而 axios 是一个基于 promise 的 HTTP 客户端,用于在浏览器和 Node.js 中发送 HTTP 请求。 在 vue.js 中使用 axios 进行跨域访问时,可能会出现跨域访问错误跨域是指在浏览器中通过 JavaScript 发起一个 HTTP 请求,该请求的目标服务器是与当前页面不同域名、端口或协议的地址。 解决这个问题的方法有多种: 1. 后端配置允许跨域访问:在后端服务器中进行配置,允许指定的域名或端口进行跨域访问。 2. 使用代理进行跨域请求:在 vue.config.js 文件中配置代理,将跨域请求转发到目标服务器。例如,在 vue.config.js 文件中添加以下配置: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://api.example.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } }; ``` 这样,当你在前端代码中发送以“/api”开头的请求时,将会使用代理进行跨域请求。 3. JSONP:如果目标服务器支持 JSONP,可以使用 JSONP 进行跨域请求。在 axios 中,默认是不支持 JSONP 的,但可以通过配置实现。例如,在请求中添加“jsonp”参数: ```javascript axios.get('http://api.example.com/data', { params: { callback: 'jsonCallback', dataType: 'jsonp' } }) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); ``` 通过以上方法,可以解决 vue.js 中 axios 跨域访问错误问题。根据具体情况选择合适的解决方法,以确保跨域请求能够正常进行。 ### 回答2: Vue.js中使用axios请求数据时,常常会遇到跨域访问错误。这是因为浏览器的同源策略限制了不同域名之间的访问解决这个问题的方法有几种: 1. 使用代理 可以在项目的配置文件(vue.config.js或者nuxt.config.js)中配置代理。通过将请求代理到同域名下的接口,实现跨域访问。 例如,可以在配置文件中添加如下代码: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://api.example.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 然后,在axios的请求中使用相对路径(不包含域名)进行访问。例如: ```javascript axios.get('/api/data') .then(response => { console.log(response.data) }) ``` 这样就可以跨域访问目标接口了。 2. 设置服务器响应头 在目标服务器上,设置允许跨域访问的响应头。一般来说,可以在后端的接口代码中添加以下响应头: ```javascript app.use(function(req, res, next) { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); next(); }); ``` 这样浏览器就会允许跨域访问该接口了。 3. JSONP JSONP是一种前端跨域访问解决方案。通过在请求中添加一个回调函数作为参数,服务器将返回该函数的调用,并将数据作为参数传递给该函数。 例如,在axios请求中使用JSONP: ```javascript axios.jsonp('http://api.example.com/data?callback=handleData') .then(response => { console.log(response.data) }) ``` 然后,在全局定义一个处理返回数据的函数: ```javascript function handleData(data) { console.log(data) } ``` 这样就可以通过JSONP实现跨域访问了。 以上是几种解决Vue.js中axios跨域访问错误的方法,可以根据具体情况选择使用。 ### 回答3: 在Vue.js中,由于浏览器的同源策略,如果我们的Vue应用与后端接口的域名或端口不一致,会出现跨域访问错误。然而,我们可以使用axios库来解决这个问题。 首先,为了解决跨域访问错误,我们可以在后端的API接口中添加响应头Access-Control-Allow-Origin: *,允许所有来源的请求访问接口。当然,我们也可以根据需求设置特定的源或域名。 另外,我们还可以通过设置代理来解决跨域访问问题。在项目的根目录下的`vue.config.js`文件中,我们可以使用`devServer`配置项来设置代理。例如,我们可以将/api路径下的请求代理到http://localhost:8000路径下,具体配置如下: ``` module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8000', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 以上配置意味着,当我们的Vue应用发起/api路径下的请求时,它将被代理到http://localhost:8000路径下。`changeOrigin`选项设置为true时,请求头中的host会被设置为目标url,同时`pathRewrite`选项可以重写请求路径,删除/api前缀。 在前端代码中,我们可以使用axios来发起跨域请求。例如,我们可以在Vue的组件中使用axios来请求后端接口: ``` import axios from 'axios' export default { methods: { fetchData() { axios.get('/api/data') .then(response => { // 处理响应数据 }) .catch(error => { // 处理错误 }) } } } ``` 通过以上方法,我们可以解决Vue.js中axios跨域访问错误问题,实现与后端接口的跨域通信。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值