为什么只在运行GET请求onChange时遇到CORS错误？
为什么只在运行GET请求onChange时遇到CORS错误？
提问于 2019-06-08 15:25:32
我使用的是一个在proxy: "localhost:5000中设置了package.json的，以便在我们的Node.js服务器上方便地查询API。
我试图使用下面的函数来使用这里的自动完成API。
自动完成功能：
import axios from 'axios';
import hereKeys from '../config/hereConfig';
export const autoCompleteFullAddress = async query => {
let address = null;
try {
await axios
.get('https://autocomplete.geocoder.api.here.com/6.2/suggest.json', {
params: {
app_id: hereKeys.appId,
app_code: hereKeys.appCode,
query: query,
maxresults: 1,
},
})
.then(response => {
address = response.data.suggestions[0].address;
});
} finally {
return address;
}
};我在呈现的组件中有一个助手函数，根据用户输入到输入字段来执行该函数。
输入组件：
const [puAddress, setPuAddress] = useState('');
const [puQuery, setPuQuery] = useState('');
const onAddressInput = e => {
const query = e.target.value;
// This Fails
autoCompleteFullAddress(query).then(suggestion => {
setPuQuery(query);
console.log(suggestion);
});
};
// This works
autoCompleteFullAddress('37044 Even Lane').then(suggestion => {
console.log(suggestion);
});
return (
<TextField
value={puQuery}
onChange={e => onAddressInput(e)}
/>
);当autoCompleteFullAddress自己运行时，console.log是正确的输出，但是一旦我尝试在组件更改时执行它，它就会失败并抛出一个错误。
引发错误：
Access to XMLHttpRequest at 'https://autocomplete.geocoder.api.here.com/6.2/suggest.json?
app_id=REDACTED&app_code=REDACTED&query=Elm+St&maxresults=1'
from origin 'http://localhost:3000' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check:
It does not have HTTP ok status.和：
OPTIONS https://autocomplete.geocoder.api.here.com/6.2/suggest.json?
app_id=REDACTED&app_code=REDACTED&query=Elm+St&maxresults=1 405失败的请求头：
Access-Control-Request-Headers: authorization
Access-Control-Request-Method: GET
Origin: http://localhost:3000
Referer: http://localhost:3000/pricing-tool
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36成功的请求头：
Accept: application/json, text/plain, */*
Origin: http://localhost:3000
Referer: http://localhost:3000/pricing-tool
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-08 15:48:34
对于将来可能会设置这样的访问令牌的人来说，这样做是为了向您的API发出请求。问题是它试图在所有Axios请求上发送带有令牌的Auth报头。
import axios from 'axios';
const setAuthToken = token => {
if (token) {
const bearerToken = 'Bearer ' + token;
// Apply to every request
axios.defaults.headers.common['Authorization'] = bearerToken;
} else {
// Delete auth header
delete axios.defaults.headers.common['Authorization'];
}
};
export default setAuthToken;可以通过更改逻辑或简单地使用获取外部API来修复。
我修正了删除那个特定请求的标题。
import axios from 'axios';
import hereKeys from '../config/hereConfig';
export const autoCompleteFullAddress = async query => {
let address = null;
delete axios.defaults.headers.common['Authorization'];
try {
await axios
.get('https://autocomplete.geocoder.api.here.com/6.2/suggest.json', {
crossdomain: true,
params: {
app_id: hereKeys.appId,
app_code: hereKeys.appCode,
query: query,
maxresults: 1,
country: 'USA,MEX,CAN',
},
})
.then(response => {
address = response.data.suggestions[0].address;
});
} finally {
return address;
}
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56510829
复制相关文章
相似问题
腾讯云开发者
